IE7 dropdown menu appears behind image

Question

I have created this css3 dropdown menu that appears behind the image when I mouse over the dropdown menu, and I have tried to figure it out. But cant for the life of me. Any help is greatly appeciated you can take a look at it here.

Answer 1

Quoting from this thread

Z-index is not an absolute measurement. It is possible for an element with z-index: 1000 to be behind an element with z-index: 1 - as long as the respective elements belong to different stacking contexts.

When you specify z-index, you're specifying it relative to other elements in the same stacking context, and although the CSS spec's paragraph on Z-index says a new stacking context is only created for positioned content with a z-index other than auto (meaning your entire document should be a single stacking context), you did construct a positioned span: apparently IE interprets this as a new stacking context.

UPDATE-

Add the following css to you page

#header
{
    position:relative;
    z-index: 2;
}
#content-wrap
{
    position:relative;
}

Answer 2

I think either of these will explain the problem and give a solution:

• http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
• http://stackoverflow.com/questions/1287439/ie7-z-index-problem

Answer 3

Give ".nav" and "content" a z-index. Make .nav higher.