IE7 dropdown menu appears behind image

By : Alex
Source: Stackoverflow.com
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.

By : Alex


Answers

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

By : Diodeus




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;
}
By : Vinay B R


This video can help you solving your question :)
By: admin