Question

I have a dropdown css menu that gets gets hidden behind the main page content when viewed in IE7. I’ve tried changing z-index values but have had no luck. I’ve also tried suggestions in other topics from this site but none have worked.

the page can be found here: http://www.melbournedodgeball.com.au/dodgeball2012/about

any help would be greatly appreciated

Answer 1

The CSS spec’s paragraph on Z-index says that new stacking context is only created for positioned content with a z-index other than auto.

You have the li inside #nav with a position:relative, an apparently IE interprets this as a new stacking context.

Try this:

#nav li {
    display: block;
    position: relative;
    z-index: 1;         // force IE to recognize stack at this point
}