My javascript drop down navigation menu displays behind content in internet explorer 7

Question

OK, so I'm working on a redesign and we've got most of our cross-browser CSS compatibility bugs worked out - except for a glaring one with ie7.

The issue is that we are using a JavaScript for a navigational menu drop down. In all browsers except the noted culprit everything functions as expected.

However, in IE7 I'm getting the drop down appearing behind my other page elements, as though the z-index was set to something negative. But I do in fact have a CSS rule applied that sets this element to a z-index of 4000, and used that rule to correct the same issue on modern browsers.

For some reasons IE7 isn't recognizing the rule. Does IE7 not support this CSS rule?? If not, any suggestions for how to resolve it for IE7? A JavaScript solution?

Here's the page in question: http://betawww.helpcurenow.org/

Thanks!

Answer 1

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly.

This could be part of the problem, if you need a JS solution, you might look into the following project:

http://code.google.com/p/ie7-js/

Answer 2

OK, after doing a bit of research thanks to Scott's suggestion about the IE7 z-index being the issue, I found the solution at http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/

The trouble was my containing elements (div#header and div#mainContent) needed to be assigned z-index values for IE7 to resolve this issue.