css inline submenu won't stay open Please Help

Question

StickerAA 0 Newbie Poster

16 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:

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
201 Views
1 Month Discussion Span
Latest Post 16 Years Ago Latest Post by StickerAA

Dani AI

Generated 6 Months Ago

Short summary and practical fix (builds on 's diagnosis and 's follow-up).

The problem is a simple hover-gap: the submenu was positioned so it sits outside the hovered area of its parent, so the browser fires mouseout while the pointer travels to the submenu. The robust way to avoid that is to stop using fixed heights and hard-coded pixel offsets for the vertical placement, and instead position the submenu relative to its parent so it starts exactly at the parent’s edge. Also prefer inline-block (or flex) for horizontal menu items instead of floating everything — it’s easier to reason about and less likely to create accidental gaps.

Example CSS pattern (drop this into your stylesheet; it is intentionally different from the code already posted):

/* keep ul reset/padding consistent */
#ao_nav ul { list-style: none; margin: 0; padding: 0; }

/* horizontal items: inline-block keeps the li area continuous */
#ao_nav ul > li { position: relative; display: inline-block; vertical-align: top; }

/* submenu sits flush beneath its parent (no accidental gap) */
#ao_nav ul > li > ul {
  position: absolute;
  top: 100%;      /* start exactly at the bottom of the parent li */
  left: 0;
  display: none;
  min-width: 160px;
  z-index: 1000;  /* ensure it appears above other content */
}

/* show on hover or when keyboard-focused */
#ao_nav ul > li:hover > ul,
#ao_nav ul > li:focus-within > ul {
  display: block;
}

/* submenu items should be block-level so links are easy to target */
#ao_nav ul > li > ul > li { display: block; }

Troubleshooting checklist

Remove fixed height from the parent li so its hover area covers the anchor.
If the submenu is still clipped, check ancestor overflow (make sure it’s not hidden).
If another element sits above the submenu, raise the submenu z-index.
Temporarily add background colors or outline to the li and submenu to visualize the hover areas while debugging.

Accessibility note

:focus-within lets keyboard users open the submenu; for older browsers add a tiny script to toggle an .open class on focusin/focusout so Tab works reliably.

This approach avoids brittle pixel nudges and yields a menu that stays open while moving the pointer into the submenu.

All 4 Replies

ko ko 97 Practically a Master Poster

16 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

16 Years Ago

Thank you that solved my problem

Edited 13 Years Ago by happygeek because: fixed formatting

css inline submenu won't stay open Please Help

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers