IE7, dropdowns, and z-index

I spent most of yesterday and most of this morning battling with a IE7 display bug. 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