CSS Dropdown menu hidden behind content IE7

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: www.melbournedodgeball.com.au/dodgeball2012/about

any help would be greatly appreciated

score 9 · Accepted Answer · answered May 14 '12 at 10:18

9

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
}

answered May 14 '12 at 10:18

Zuul

16,217
6
61
88

I always forget this! It's the one thing about IE7 that makes it better than any modern browser. – Trip Sep 11 '12 at 09:34
Great! Answer, just saved me, my hair! Thank you! – Jason Congerton May 21 '13 at 09:04

dtsg · Answer 2 · 2012-05-14T10:19:36.413

1

You need to add

position:relative;

To your <ul>

Z-Index is specified relative to all other elements in the same stacking context. You can have a Z-Index of 100 but it wont make a bit of difference if the elements belong to completely different stacking contexts.

edited May 14 '12 at 10:19

answered May 14 '12 at 10:08

dtsg

4,408
4
30
40

score 1 · Answer 3 · answered May 14 '12 at 10:34

1

I have test this code, It will work sure Please set this css for IE7 only

#menu {position:relative; z-index:100;}

answered May 14 '12 at 10:34

ShibinRagh

6,530
4
35
57

CSS Dropdown menu hidden behind content IE7

3 Answers3

Linked