Back story: we are using jQuery’s superfish drop down menus (a jQuery based implement of suckerfish/son of suckerfish) for site navigation. Everything works great in Firefox 2/3 and Safari. I’m going to assume that IE6 looks great as well since suckerfish is known to work well in IE6.

IE7 is a different story.

There is a large image directly beneath the navigation menu. Unfortunately for me, in IE7 the menu was being rendered beneath the image, despite having a z-index of 1001.

After some careful (and careless) digging and googling, I came across a solution.

To summarize, IE7 will not render the menu with the appropriate z-index unless that z-index is present on the top level :hover style. To clarify:


/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
}
.sf-menu li:hover {
z-index: 100; /* This is the important style directive, without it IE7 chokes */
}
.sf-menu * li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
font-weight: bold;
}


IE7 Suckerfish Hover CSS