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;
}