Problem with CSS dropdown menus displaying in IE 7 (and 6)

HTML & CSS
1

I have dropdown menus that display well in all tested browsers including IE 8, but the dropdowns don’t function in IE 7 and 6. I’m less concerned about IE 6 but would very much appreciate advice for IE 7 functionality (and perhaps this will carry over to IE 6).

Here’s a test page which includes only the menu html and applicable CSS (which I have commented to aid viewing).

Much appreciation for any assistance!

PS: The menus are based on those at http://www.whitehouse.gov which work in IE 6 and 7.

2

Nice menu. I’m guessing IE7 either wants/needs a explicit value (eg pixels not left auto) on hover, or needs haslayout (eg min-height:0). IE6 will maybe need the same and a script to simulate hover on the li. Here is my mega menu which does work in IE6/7 if you want to dig through the code.

3

Greetings,

You were right on suggestion #2. EE needs haslayout. Adding the second line to the following code made it work:

ul#menu li:hover div.menu-outer {
	left:auto;
	min-height:0;
}

Thanks also for sharing your cool menu!

4

Here’s a successful working menu. Any suggestions for how to keep the top link highlighted along with the megamenu when you are hovering over megamenu links?

5

Duh … just simplified this excessively-specific rule: #menu li.menubar a:hover { background: #fff; }

to this: #menu li:hover { background: #fff; }

and problem is solved, minus a few more tweaks. Cheers!

6

You should be aware that IE6 won’t support hover for anything other then anchor, and you haven’t implimented javascript to do so :). So the entire mega dropdown will need IE6 support (google suckerfish javascript)

That will add a class to <li> elements upon hovering (you will need to update the CSS hover rules to include support for the <li> with the class for IE6)

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

Update the parent ID (currently set at “#nav” and the class added will be .sfHover

So update the hover rules acccordingly :).

7

Thank you so much for the additional info, as yes, my menu indeed failed in IE6!

Sitepoint should win a prize for being the most helpful site ever, at least when it comes to CSS support!