CSS Horizontal Menu not working in IE8!

HTML & CSS
1

The good news is, I found what the problem is but I don’t know how to fix it. I am trying to make a dropdown menu underneath the link “About”

Here is the url for a Wordpress template that I’m slowly working on:
http://www.d415wordpress.com/

Here is the CSS code for the menu:

#navmenu {
	width: 900px;
	display:block;
	float: right;
	background: red;
}

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; background: red;}

#navmenu li {display: inline; background: red;}

#navmenu a {display: block; text-decoration:none; color: black; background: red; padding: 0 10px; line-height: 38px;}

#navmenu a:hover {color: #ffffff; background: black;}

#navmenu ul ul {
	display:none;
	position:absolute;
	top:38px;
	left:0;
}
#navmenu ul ul li {
	min-width: 150px;
}
#navmenu ul ul ul {
	left:100%;
	top:0;
}
#navmenu ul ul a {
	background:#333;
	height:auto;
	line-height:1em;
	padding:10px;
	width: 150px;
	float: left;
	margin-left: 0;
}
#navmenu li:hover > a,
#navmenu ul ul :hover > a {
	color:#fff;
	background:#333;
}
#navmenu ul li:hover > ul {
	display:block;
}

Right here is the unordered list inside the main unordered list.

#navmenu ul ul { display:none; position: absolute; z-index: 999; top: 38px; left: 0px; margin-right: 0;
}

When display is set to none, I can rollover the “About” link and make this unordered list appear again. However this rollover effect only works in Mozilla. What can I do for IE8? I already have the latest DOCTYPE in place.

Thanks

2

First of all, this could be easily fixable, but I won’t give you the fix because (no I’m not mean :p) you are doing a horrible way for dropping down. Just in that previous snippet you posted, you are excluding IE6 from the deal (not that it would matter since :hover isn’t supported on anything other then anchors) but you are hiding/showing via display:none/block which has accessibility isues for keyboard users.

Hide your dropdowns via a huge negative left margin (margin-left:-999em) and then on :hover of the <li>, make the left margin 0.

You also have a doctype above the comment which is causing quirks mode for IE8

Remove the comment above hte doctype and all should be good probably :slight_smile:

3

One more bit of code. When I removed this from my stylesheet, the rollover didn’t work in Mozilla as well.

#navmenu li:hover > a,
#navmenu ul ul :hover > a {
	color:#fff;
	background:#333;
}
#navmenu ul li:hover > ul {
	display:block;
}