Member Avatar for StickerAA

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; 
}
  • 2 Contributors
  • 4 Replies
  • 131 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by StickerAA

Recommended Answers

All 4 Replies

Member Avatar for ko ko 
#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..

Member Avatar for ko ko 
#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..

Member Avatar for ko ko 
#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..

Member Avatar for StickerAA

Thank you that solved my problem

Edited by happygeek because: fixed formatting
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.