Drop down menu great in FF, won't close in IE

Question

Loopster 0 Newbie Poster

18 Years Ago

Hello,
Appreciate any help on this problem. I have coded a drop down menu that works great in FF, but in IE it won't close when you have moved off of the drop down table. Please review and let me know any ideas. Thank you! There are 4 parts of code relevant to the drop down menu and here they are:

1. The index.html piece (just the top 30 or so lines are shown from index.html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>The Stuff Safari</title>
<meta name="description" content="Civil War Collectibles and memorabilia"/>
<meta name="keywords" content="Collectibles, memorabilia"/>

<link rel="StyleSheet" href="css/common-style.css" type="text/css">
<link rel="StyleSheet" href="css/gold-menu.css" type="text/css">

<script language="JavaScript" type="text/javascript" src="css/css.js"></script>
<script language="JavaScript" type="text/javascript" src="javascripts.js"></script>

</head>
<body>
<div id="header">
	<div id="logo">
		<h1><a href="#"><b>theStuffSafari</b>...</a></h1>
	</div>
	<div id="top">
           <h1>...time to hunt down your treasure</h1>
	</div>
</div>

       <script language="JavaScript" type="text/javascript" src="menu.js"></script>

2.

<!-- Begin

document.write('<table cellpadding="0" cellspacing="0" border="0" class="menutable"><tr><td class="printhide">');

document.write('<ul id="menunav">');

// START MENU LINKS - EDIT BELOW THIS AREA


document.write('<li style="width: 124px;"><a href="index.html">Home</a></li>');


document.write('  <li style="width: 125px;"><a href="sports.htm">Sports Stuff</a>'); 
document.write('    <ul>');
document.write('      <li><a href="sports.htm">Sports Stuff</a></li>');
document.write('      <li><a href="sports.htm">Collectibles</a></li>');
document.write('      <li><a href="sports.htm">Memorabilia</a></li>');
document.write('      <li><a href="sports.htm">Sports Stuff articles</a></li>');
document.write('    </ul>');
document.write('  </li>');

document.write('  <li style="width: 130px;"><a href="newsandlinks.htm">News &amp; Links Stuff</a>'); 
document.write('    <ul>');
document.write('      <li><a href="newsandlinks.htm">Company News</a></li>');
document.write('      <li><a href="newsandlinks.htm">Links</a></li>');
document.write('    </ul>');
document.write('  </li>');

// END LINKS //

document.write('</ul>');

document.write('</td></tr></table>');

// END -->

3. gold-menu.css

/* START THE CODE FOR THE MENUS */


/* MENU OUTER TABLE - BACKGROUND & TOP & BOTTOM MENU BORDERS */

.menutable 		{
                        clear: both;
                        float: none;
			background-image: url("../images/menu.gif");
			background-color: #C0C1B4;
			white-space: nowrap;
			width:760;
                        height: 30px;
			border-top: #47473B 0px solid;
			border-bottom: #47473B 1px solid;
			padding: 0px;
			margin: 0px auto;
			}

/* CODE FOR MENU 2ND OUTER TABLE */

#menunav, #menunav ul 	{
			float: left;
			white-space: nowrap;
			width: 760;
			list-style: none;
			padding: 0px;
			border: solid #FFFFFF;
			border-width: 0px 0px 0px 0px;
			/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
			margin: 0px 0px 0px 0px;
			}

/* TOP LEVEL MARGINS, FONT FACE & FONT COLORS & PADDING */

#menunav a 		{
			color: #666666;
			font: 12px arial, sans-serif;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
			padding: 3px 5px 4px 5px;
			width: auto;
			display: block;
			cursor: pointer;
			}



/* TOP LEVEL BACKROUND COLOR AND BORDERS - EDIT MENU IMAGES ALSO */

#menunav li 		{
			background-image: url("../images/menu.gif");
			background-color: #C0C1B4;
			border: solid #9E9E88;
			border-width: 0px 1px 0px 0px;	/* THIS IS A RIGHT BORDER */
			/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
			float: left;
			padding: 0;
			}

/* TOP LEVEL HOVER FONT COLOR */

#menunav li a:hover	{
			background-image: url("../images/menuon.gif");
			color: #000000;
			text-decoration: none;
			cursor: pointer;
			}

/* TOP LEVEL HOVER BACKGROUND COLOR AND BORDERS - EDIT MENU IMAGES ALSO */

#menunav li:hover, #menunav li.IEMhover
			{

			background-color: #D0D0C5;
			border: solid #9E9E88;
			border-width: 0px 1px 0px 0px;	/* THIS IS A RIGHT BORDER */
			/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
			}

/* SUB LEVEL FONT & FONT COLOR & PADDING */

#menunav li ul a 	{
			font: 11px verdana, arial, sans-serif;
			color: #47473B;
			font-weight: normal;
			text-decoration: underline;
			text-align: left;
			padding: 4px 0px 4px 0px;
			text-indent: 8px;
			cursor: pointer;
			}

/* SUB LEVEL FONT HOVER COLOR */

#menunav li ul a:hover 	{
			background-image: none;
			color: #000000;
			text-decoration: none;
			cursor: pointer;
			}


/* SUB LEVEL OUTER BORDER */

#menunav li ul 		{
			position: absolute;
			left: -999em;
			height: auto;
			width: 165px;
			border: solid #47473B;
			border-width: 1px 1px 1px 1px;
			/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
			margin: 0;
			}

/* SUB LEVEL BACKGROUND COLOR & BORDER OPTION FOR EACH LINK */

#menunav li ul li 	{
			background-image: none;
			background-color: #FFFFFF;
			border: solid #C0C0C0;
			border-width: 1px 0px 0px 0px;
			/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
			}


/* SUB LEVEL HOVER BACKGROUND AND BORDERS */

#menunav li ul li:hover, #menunav li ul li.IEMhover
			{
			background-image: none;
			background-color: #F0F0F0;
			border: solid #C0C0C0;
			border-width: 1px 0px 0px 0px;
			/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
			}

/* SUB MENU WIDTH - ALSO EDIT TWO BELOW AND ONE ABOVE TO MATCH */

#menunav li li {
	padding-right: 0px;
	width: 165px;
}

/* SUB MENU LINK WIDTH */

#menunav li ul a {
	width: 165px;
}

/* FOR 3rd LEVEL MENU LOCATION */

#menunav li ul ul {
	margin: -21px 0px 0px 160px;
}

#menunav li:hover ul ul, #menunav li:hover ul ul ul, #menunav li.IEMhover ul ul, #menunav li.IEMhover ul ul ul
{ left: -999em; }

#menunav li:hover ul, #menunav li li:hover ul, #menunav li li li:hover ul, #menunav li.IEMhover ul, #menunav li li.IEMhover ul, #menunav li li li.IEMhover ul
{ left: auto; }

/* FOR 3rd LEVEL ARROW */

#menunav a.parent {
	background: url(../picts/menu-arrow.gif) center right no-repeat;
}

4.

<!-- Begin

function blockError(){return true;}
window.onerror = blockError;

// -->

html-css javascript web-design

1 Contributor
1 Reply
113 Views
1 Day Discussion Span
Latest Post 18 Years Ago Latest Post by Loopster

Dani AI

Generated 9 Months Ago

A few diagnostic notes and practical fixes that build on 's update.

What happened
Older IE variants (and quirks-mode rendering) are picky about positioned elements and hovering. When submenus are absolutely positioned and overlap or change the document flow, IE can fail to fire the expected mouseout/hover transitions so the submenu stays visible. For that reason forcing the LI back to a non-positioned (static) state on hover, as discovered, often stops the “stuck” hover because it removes the positioned ancestor that confused the browser.

Quick checklist to try first

Make sure the menu ID you style and the ID in the markup match (the thread shows both menunav and menu in different places).
Use a standards DOCTYPE so IE runs in standards mode (no quirks).
Check for overlapping transparent elements or z-index values that can intercept mouse events. Temporarily add visible borders/backgrounds to see hit areas.
If you need to support pre-CSS2.1 IE (IE6/7), use a small JS fallback that toggles a hover class on LI (the CSS already contains an IE-specific hover-class hook).

Small, safe IE hover shim (place after the menu markup)

(function(){
  var nav = document.getElementById('menunav');
  if (!nav || !document.getElementsByTagName) return;
  var lis = nav.getElementsByTagName('li');
  for (var i=0;i<lis.length;i++){
    lis[i].onmouseover = function(){ this.className = (this.className||'') + ' IEMhover'; };
    lis[i].onmouseout  = function(){ this.className = (this.className||'').replace(/\bIEMhover\b/,''); };
  }
})();

This creates the .IEMhover class that older IE can use the same way modern browsers use :hover.

Further tips
If the off-screen/left:-999em technique still misbehaves, try toggling visibility or display instead (or add a tiny hide delay with setTimeout) so accidental flicker is reduced. Use Developer Tools to inspect computed positions and watch mouse events in real time. For long-term maintenance, consider a small modern CSS/JS menu or a lightweight library that normalizes these cross-browser edge cases.

Reference: MDN on the :hover pseudo-class for modern behavior and compatibility notes: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover.

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.

Loopster 0 Newbie Poster · Answer 1 · 2008-03-28T18:17:20+00:00

Very happy to have found the fix to my problem. The fix is posted below.
Here is what was needed:

This code was added to the Stylesheet:

#menu li:hover, #menu li.hover {
    position: static;
}