My css inline submenu won't stay open long enough to select an option. As soon as the cursor leaves the main selection the submenu box closes. Can be viewed at: http://isite.thevatraininginstitute.com/home.htm

html code

<div id="ao_nav"> 
<ul>
	<li id="first">Accessibility Options:  </li>
    <li><a href="home.htm">Default Font Medium &nbsp; -</a></li>
	<li><a href="#">Large &nbsp;  -</a></li>
	<li><a href="#">Extra Large &nbsp; -</a></li>
	<li><a href="ng_home.htm">No Graphics &nbsp; -</a></li>
	<li id="contrast"><a href="#">Contrast </a>
      <ul id="one">
        <li><a href="md.htm">Modified Default</a></li>
        <li><a href="bw.htm">Black on White</a></li>
        <li><a href="wb.htm">White on Black</a></li>
      </ul>
	</li>			
</ul>
</div><!--  ao_nav  -->

CSS code

#ao_nav  {
			margin:auto;
			width: 930px;
			height:42px;
			border: 5px #F9C800 solid;
			border-bottom: none;
}
#ao_nav a {
		   color: white;
		   font-size: 9pt;
		   font-weight:bold;
}
#ao_nav ul {
			width: 925px;
			height:30px;
			list-style-type:none;
			border: 2px green solid;
}
#ao_nav li#first{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;
}
#ao_nav li#contrast{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;			
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;

	
}

#ao_nav li{
			display:inline;
			margin:0 0 0 12px;
			position:relative;
			float:left;
			text-align:bottom;
			height: 20px;

}
#ao_nav li ul{
			width: 160px;
			height:60px;
			border: 2px white solid;
			display:none;
			position:absolute;
			left: -75px;
			top: 30px;
}
#ao_nav li#contrast:hover ul#one{
								  display:block; 
								  color:white; 
								  background-color: #1A0000; 
								  font-weight: bold; 
								  border: 2px #f9c800 outset; 
}
#ao_nav li#first{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;
}
#ao_nav li#contrast{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;			
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;

	
}
#ao_nav li{
			display:inline;
			margin:0 0 0 12px;
			position:relative;
			float:left;
			text-align:bottom;
			height: 20px;

}

'#ao_nav li {}', this statement overwrite '#ao_nav li#contrast{}', and '#ao_nav li#first'. If you need more than one selectors with same properties, group these selectors:

#ao_nav li#contrast, #ao_nav li#first {
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;			
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;
}
/* this is the same because the '#first' and '#contract' are the children of ul container which is under '#ao_nav' div */
#ao_nav ul li{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;			
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;	
}

Instead of:

#ao_nav li#first{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;
}
#ao_nav li#contrast{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;			
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;	
}

The 'text-align:bottom' was not right. 'text-align' has three values 'left,right,center'.
The sub menu cannot be show longer because it's parent 'li#first' has '20px' height, and it positioned at '30px' top from it's parent. Replace 'top: 30px' with 'top: 20px' in '#ao_nav li ul' properties. It would be work. Good luck..

#ao_nav li#first{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;
}
#ao_nav li#contrast{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;			
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;

	
}
#ao_nav li{
			display:inline;
			margin:0 0 0 12px;
			position:relative;
			float:left;
			text-align:bottom;
			height: 20px;

}

'#ao_nav li {}', this statement overwrite '#ao_nav li#contrast{}', and '#ao_nav li#first'. If you need more than one selectors with same properties, group these selectors:

#ao_nav li#contrast, #ao_nav li#first {
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;			
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;
}
/* this is the same because the '#first' and '#contract' are the children of ul container which is under '#ao_nav' div */
#ao_nav ul li{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;			
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;	
}

Instead of:

#ao_nav li#first{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;
}
#ao_nav li#contrast{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;			
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;	
}

The 'text-align:bottom' was not right. 'text-align' has three values 'left,right,center'.
The sub menu cannot be show longer because it's parent 'li#first' has '20px' height, and it positioned at '30px' top from it's parent. Replace 'top: 30px' with 'top: 20px' in '#ao_nav li ul' properties. It would be work. Good luck..

#ao_nav li#first{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;
}
#ao_nav li#contrast{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;			
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;

	
}
#ao_nav li{
			display:inline;
			margin:0 0 0 12px;
			position:relative;
			float:left;
			text-align:bottom;
			height: 20px;

}

'#ao_nav li {}', this statement overwrite '#ao_nav li#contrast{}', and '#ao_nav li#first'. If you need more than one selectors with same properties, group these selectors:

#ao_nav li#contrast, #ao_nav li#first {
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;			
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;
}
/* this is the same because the '#first' and '#contract' are the children of ul container which is under '#ao_nav' div */
#ao_nav ul li{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;			
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;	
}

Instead of:

#ao_nav li#first{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;
}
#ao_nav li#contrast{
			display:inline;
			margin:3px 0 0 10px;
			position:relative;
			float:left;			
			height: 20px;
			color: white;
		    font-size: 9pt;
		    font-weight:bold;	
}

The 'text-align:bottom' was not right. 'text-align' has three values 'left,right,center'.
The sub menu cannot be show longer because it's parent 'li#first' has '20px' height, and it positioned at '30px' top from it's parent. Replace 'top: 30px' with 'top: 20px' in '#ao_nav li ul' properties. It would be work. Good luck..

Thank you that solved my problem

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.