css inline submenu won't stay open Please Help

Question

StickerAA 0 Newbie Poster

14 Years Ago

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; 
}

html-css web-design

2 Contributors
4 Replies
132 Views
1 Month Discussion Span
Latest Post 14 Years Ago Latest Post by StickerAA

ko ko 97 Practically a Master Poster

14 Years Ago

#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..

Reply to this topic

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.

ko ko 97 Practically a Master Poster · Answer 1 · 2010-02-26T15:53:46+00:00

#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..

ko ko 97 Practically a Master Poster · Answer 2 · 2010-02-26T15:54:04+00:00

#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..

StickerAA 0 Newbie Poster · Answer 3 · 2010-03-31T23:36:21+00:00

StickerAA 0 Newbie Poster

14 Years Ago

Thank you that solved my problem

Edited 11 Years Ago by happygeek because: fixed formatting