Touchy Drop Down Menu

I have drop down (left actually) menu, but it’s difficult to stay on the sub menu. It disappears quickly…is there some way to correct this?

Yes there is a way to get it staying :).

We can do nothing without a link to your page though (or at the very minimal, HTML and CSS to replicate the issue). If you also wanted (or only want) a script which slows down the time until the menu disappears, there is hope. Take a look at some Jquery scripts. I know Superfish has that feature in it, in particular :).

You have to make sure that the dropdown part of the menu stays in contact with the trigger element. If you have moved the dropdown too far away from the trigger element then the focus is lost and the menu disappears before you can get to it.

Also in older versions of IE if you have vertical margins between the list items in the menu then the drop down will also disappear as you pass over these gaps unless you have set a background colour to the ul dropdown.

Set a background colour to your trigger area (usually the parent list) and then you can see if the dropdown is in contact and not placed too far away.

If the dropdown falls over flash, or a js slideshow, or elements with higher z-index then the dropdown will also disappear so you need to control the z-index of the parent of the list to be higher than the content undernearh (only positioned elements can have a z-index so if non positioned then add position:relative and then the z-index can be applied). If the dropdown is over flash then you need to set the flash to wmode=“opaque” (google wmode=“opaque”) before z-index will apply.

This is what I have…


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">


<head>
<meta name="keywords" content="Dick Stout, Metal Detecting, FMDAC, Treasure Hunting, coins, coinhunting, relics, prospecting, search, treasure, White's, Garrett, Minelab, 
searchcoil, Western and Eastern, Recovery, Research">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stout Standards</title>

<link rel="shortcut icon" href="favicon.ico">




<link rel="stylesheet" href="styles.css" type="text/css"/>

<style type="text/css">

img {
border: solid white;
}

body {
    background: black; 
    font-size:100%;
    margin:0;
    padding:0;
   
}
#container {
    width: 95%;
    min-width:990px;/*keep BG color from stopping short*/
    background: black;/*header BG color moved to here*/
}

#header {
    width: 990px;
    text-align: center;
    margin:0 auto;/*center it up in the container div*/
    padding: 100px 0;
    color:#000;
}
#header:after { /*contain header floats and allow dropdowns to overflow past header bottom*/
    clear:both;
    content:"";
    display:block;
    height: 0;
    font-size:0;
}
#header img {
    float:right;
    border:4px solid 000;
}
#sidebar {
    width: 12em;

    font-size:40px;
}
#MainContent {
    background: #FFA07A;
    margin-left:5em;
    margin-right:5em;
   padding:10px 20px 0 1em;
}

/*=== Begin Nav Styles ===*/
#nav, #nav ul {
    float:left;
    width:176px;/*180px total with 2px borders*/
    margin:0;
    padding:0;
    list-style:none;
    background: #D2B48C;/*for testing only, remove when done*/
    border:2px solid #000;
}
#nav li {
    position:relative;/* set containing block for AP sub ul */
    float:left;/*kill IE whitespace bug*/
    width:166px;
    height: 47.5px;
    text-align:center;/*center the text*/
}
#nav li a {
    display:block;/*use block instead of float for IE6 */
    width:100%;/*IE needs a width*/
    /*height:3em; remove height to allow text to wrap*/
    padding:.65em 0;/*set padding on top and bottom to create more height*/
    text-decoration:underline;
    color: #000;
    font-weight:bold;
    font-size:1em;
}
/* --- Text and Bg colors on hover ---*/
#nav li:hover,
#nav li.sfhover { 
    background:#333;
    visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a,
#nav li.sfhover a {color:#FFF}

#nav li:hover li a,
#nav li.sfhover li a {color:#000}

#nav li li:hover a,
#nav li li.sfhover a {background:#333; color:#FFF}

/* ------ Sub UL Drop Down ------ */
#nav ul {
    position:absolute;
    width:176px;
    left:176px;
    top:-2px;/*recover top border (use "0" without borders)*/
    margin-left:-999em;/* hide the sub ul */
    background: #F5DEB3;/* IE needs some sort of BG on the nested ul */
}
#nav li:hover ul,
#nav li.sfhover ul {
    margin-left:0;/* reveal the sub ul on li:hover */
}

/*=== Begin Footer ===*/
#footer {
    width:100%;
    clear:both;
}
#footer p {
    margin:0;
    padding:10px 0;
    background:#DDD;
    text-align:center;
    font-size:1em;
}
.clearfloat {
    clear:both;
    height:0;
    font-size:0;
}






</style>

<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->








</head>
<body>
<center<font color="red">Galleries</center>


<div id="container">
    <div id="header">
        <ul id="nav">
            <li><a href="Bio2.html">Artist Bio</a></li>
	    
	
           
	    <li><a href="Equip.html">Equipment</a>
               
            <li><a href="Nature.html">Travel &raquo;</a>
                <ul>
                    <li><a href="Travel.html">Texas</a></li>
                  <li><a href="Travel.html">Louisiana</a></li>
		    <li><a href="Bill.html">Mexico</a></li>
                    <li><a href="Oldfolks.html">Arkansas</a></li>		
                    <li><a href="Bill.html">France</a></li> 
                    <li><a href="Bill.html">Other</a></li> 
                    
                   
            </li>
            
              <li><a href="Travel.html">Nature &raquo;</a>
              <ul>
		    <li><a href="Bill.html">Flowers</a></li>
                    <li><a href="Oldfolks.html">Butterflies</a></li>		
                    <li><a href="Bill.html">Birds</a></li> 
                    <li><a href="Bill.html">Wildlife</a></li> 
                    <li><a href="Bill.html">Insects</a></li> 
                   
            </li>
            
                 
            
            
            
            
            
            
            
            
            
            
            <li><a href="Food.html">Food</a></li>
            
            <li><a href="Portraits.html">Portraits</a></li>
            <li><a href="Coinhunting.html">Black & White</a></li>                
            <li><a href="clubs.html">Abstract</a></li>
	    <li><a href="clubs.html">World Today</a></li>
	    <li><a href="inthefield.html">In The Field</a></li>
	    
	     <li><a href="ending.html">My Message</a></li>
                   
	 <li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
	 
	 
	 
	
	 
	    <br>
        </ul>
        <img src="images/IndexPhoto2.jpg" width="800" height="570"/>
     <!--end #header-->
    
    
 
   
    
    
    
    
    
    <div id="footer">
   
        <p>Copyright &copy; 2011 Fay Stout. All Rights Reserved</p>    
	
	
   
	
			
			
				
			
			
  
  
   
    </div> <!--end #footer-->
</div> <!--end #container-->

</body>
</html>

Hi,

It was as I suspected and your flyout was too far away from the element that triggered it. You also had a corrupt list structure.

Here is the code in working order.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta name="keywords" content="Dick Stout, Metal Detecting, FMDAC, Treasure Hunting, coins, coinhunting, relics, prospecting, search, treasure, White's, Garrett, Minelab, 
searchcoil, Western and Eastern, Recovery, Research">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stout Standards</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css" type="text/css"/>
<style type="text/css">
img { border: solid white; }
body {
	background: black;
	font-size:100%;
	margin:0;
	padding:0;
}
#container {
	width: 95%;
	min-width:990px;/*keep BG color from stopping short*/
	background: black;/*header BG color moved to here*/
}
#header {
	width: 990px;
	text-align: center;
	margin:0 auto;/*center it up in the container div*/
	padding: 100px 0;
	color:#000;
}
#header:after { /*contain header floats and allow dropdowns to overflow past header bottom*/
	clear:both;
	content:"";
	display:block;
	height: 0;
	font-size:0;
}
#header img {
	float:right;
	border:4px solid 000;
}
#sidebar {
	width: 12em;
	font-size:40px;
}
#MainContent {
	background: #FFA07A;
	margin-left:5em;
	margin-right:5em;
	padding:10px 20px 0 1em;
}
/*=== Begin Nav Styles ===*/
#nav, #nav ul {
	float:left;
	width:176px;/*180px total with 2px borders*/
	margin:0;
	padding:0;
	list-style:none;
	background: #D2B48C;/*for testing only, remove when done*/
	border:2px solid #000;
}
#nav li {
	position:relative;/* set containing block for AP sub ul */
	float:left;/*kill IE whitespace bug*/
	width:100%;
	text-align:center;/*center the text*/
}
#nav li a {
	display:block;/*use block instead of float for IE6 */
	width:100%;/*IE needs a width*/
	/*height:3em; remove height to allow text to wrap*/
   padding:.65em 0;/*set padding on top and bottom to create more height*/
	text-decoration:underline;
	color: #000;
	font-weight:bold;
	font-size:1em;
}
/* --- Text and Bg colors on hover ---*/
#nav li:hover, #nav li.sfhover {
	background:#333;
	visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a, #nav li.sfhover a { color:#FFF }
#nav li:hover li a, #nav li.sfhover li a { color:#000 }
#nav li li:hover a, #nav li li.sfhover a {
	background:#333;
	color:#FFF
}
/* ------ Sub UL Drop Down ------ */
#nav ul {
	position:absolute;
	width:176px;
	left:100%;
	top:-2px;/*recover top border (use "0" without borders)*/
	margin-left:-999em;/* hide the sub ul */
	background: #F5DEB3;/* IE needs some sort of BG on the nested ul */
}
#nav li:hover ul, #nav li.sfhover ul { margin-left:0;/* reveal the sub ul on li:hover */ }
/*=== Begin Footer ===*/
#footer {
	width:100%;
	clear:both;
}
#footer p {
	margin:0;
	padding:10px 0;
	background:#DDD;
	text-align:center;
	font-size:1em;
}
.clearfloat {/* you never need this rule as there are better methiods to clear floats */
	clear:both;
	height:0;
	font-size:0;
}
</style>

<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->

</head>
<body>
<div id="container">
		<div id="header">
				<ul id="nav">
						<li><a href="Bio2.html">Artist Bio</a></li>
						<li><a href="Equip.html">Equipment</a></li>
						<li><a href="Nature.html">Travel &raquo;</a>
								<ul>
										<li><a href="Travel.html">Texas</a></li>
										<li><a href="Travel.html">Louisiana</a></li>
										<li><a href="Bill.html">Mexico</a></li>
										<li><a href="Oldfolks.html">Arkansas</a></li>
										<li><a href="Bill.html">France</a></li>
										<li><a href="Bill.html">Other</a></li>
								</ul>
						</li>
						<li> <a href="Travel.html">Nature &raquo;</a>
								<ul>
										<li><a href="Bill.html">Flowers</a></li>
										<li><a href="Oldfolks.html">Butterflies</a></li>
										<li><a href="Bill.html">Birds</a></li>
										<li><a href="Bill.html">Wildlife</a></li>
										<li><a href="Bill.html">Insects</a></li>
								</ul>
						<li><a href="Food.html">Food</a></li>
						<li><a href="Portraits.html">Portraits</a></li>
						<li><a href="Coinhunting.html">Black & White</a></li>
						<li><a href="clubs.html">Abstract</a></li>
						<li><a href="clubs.html">World Today</a></li>
						<li><a href="inthefield.html">In The Field</a></li>
						<li><a href="ending.html">My Message</a></li>
						<li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
						<br>
				</ul>
				<img src="images/IndexPhoto2.jpg" width="800" height="570"/> 
				<!--end #header-->
				
				<div id="footer">
						<p>Copyright &copy; 2011 Fay Stout. All Rights Reserved</p>
				</div>
				<!--end #footer--> 
		</div>
</div>
<!--end #container-->

</body>
</html>

Set both LU an LI same width will solve your problem.

#nav, #nav ul {
float:left;
width:176px;/180px total with 2px borders/
margin:0;
padding:0;
list-style:none;
background: #D2B48C;/for testing only, remove when done/
border:2px solid #000;
}
#nav li {
position:relative;/* set containing block for AP sub ul */
float:left;/kill IE whitespace bug/
width:176px;
height: 47.5px;
text-align:center;/center the text/
}

Other members may have different solutions.

No, that’s the same solution I gave above :slight_smile:

(Except that the html also needs to be fixed or it won’t work properly anyway :wink: )

It seems work fine with the changes as I suggested. Take a look this test page:

http://w-cms.info/test/dropdown.html

I see yours work as well. I should have taken a look at that first. Sorry.

Yes that is broken because of the malformed html I mentioned and when you roll over the list two menus appear at once instead of one (see dropdown1.png attachment). It should look like my example in dropdown2.png :slight_smile: However your css was correct.

I see yours work as well. I should have taken a look at that first. Sorry.

No worries I didn’t actually specify what I had changed so it wasn’t immediately obvious.

I can see why you have the title of CSS GURU. I’m new here. Just anxious to help out where I think I can. Perhaps I’ve jumped the gun a bit.

No worries, glad you tried to help and you had the right solution for the css so it was a good try.:slight_smile:

Thanks everyone for the lesson…made the change and it’s working fine. You folks are the best, and I appreciate your help.