Menu issues IE6/7 (dropping behind content)

[JoshWhiteDesign]

I feel like this is going to be an easy fix, but I keep trying different combinations of changes and I’m not finding the answer. Can anyone take a look at this and see what I’m missing?

http://www.wibd.net

I’m using the built in menu structure of WP, and everything seems to be lining up correctly in IE8, FF, Chrome and Safari, but in IE6/7 the menu drop down elements are sliding below the content area and you can’t actually click on the drop down links.

Here’s my CSS for the menus – it’s pretty straight forward, but maybe I need to add like a z-index to the ul ul??

Code:

/* Menu */

#main-nav {
margin:6px 10px 0 0;
width: 800px;
display:block;
float:right;
z-index:1;
}
#main-nav .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
}
#main-nav .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#main-nav .menu-header li,
div.menu li {
float:left;
position: relative;
}
#main-nav a {
font-family:helvetica;
font-weight:bold;
background-color:#f2eae0;
margin:0 5px 0 5px;
display:block;
text-decoration:none;
color:#560a0a;
padding:0 15px 0 15px;
line-height:38px;
-webkit-border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
}
#main-nav ul ul {
display:none;
position:absolute;
top:38px;
left:0;
float:left;
width: 180px;
z-index: 99999;
}
#main-nav ul ul li {
min-width: 180px;
}
#main-nav ul ul ul {
left:100%;
top:0;
}
#main-nav ul ul a {
background:#f2eae0;
height:auto;
line-height:1em;
padding:10px;
width: 160px;
-webkit-border-radius:0;
-moz-border-radius:0;
border:1px solid #ded0be;
}
#main-nav li:hover > a,
#main-nav ul ul :hover > a {
color:#fff;
background:#280404;
}
#main-nav ul li:hover > ul {
display:block;
}

[jamygolden]

I’ve had something similar before. Try creating an lte IE 7 stylesheet and make the z-index of the content -1 and the z-index of the menu 1 or greater.

[dcp3450]

using negatives in your z-index is bad practice. use 0 and up. I use hundreds myself (0, 100, 200, 300, …). Typically if an item is falling behind others you need to set the z-index.

[jamygolden]

I’ve had instances where a negative value in an IE specific stylesheet was the only thing that solved the issue…
It might be bad practice, but if it’s in an IE7-and-below specific stylehseet, I don’t really care and I consider it a fix.

[vijaywebmaker]

Please use this DropXmenus, it will works in all the broswers

It might be helpful for you….

[JoshWhiteDesign]

Thanks Jamy – you are totally correct.

I see what you are saying about the bad practice of using negative z-index dcp, but the weird thing is I spent like 2 hours trying EVERYTHING else and Jamy seems to be right so far that nothing else appears to be fixing it. The standard stylesheet works with IE8, IE8 Compatibility, FF, Chrome and Safari, but IE7 and 6 need that -1 z-index to function properly.

[Author]

Posts