Question

I have an issue where the sub menu (dropdown) is behind the #main div. I have tried changing z-index values (ensuring div is positioned) but had no luck.

I have uploaded my progress to jsfiddle and wondered whether someone could see where I have gone wrong?

http://jsfiddle.net/indigoclothing/8aGZC/4/

Thanks

Answer 1

The demo is very complicated to work through and you have added the some CSS in the HTML as links and some as managed resources in jsFiddle which are loading twice, so it is very difficult to create a working fiddle. In future may I suggest that you just include the relevant parts that are not working. Constructing a Short, Self Contained, Correct (Compilable), Example often results in figuring out where the problem is yourself as well 🙂

That said, removing the following from the CSS section in the fiddle and the managed resources seems to fix it for me.

#header {
    z-index:2; // <-- remove this
}

The problem is that the menu and content have different stacking contexts – see Overlapping and z-index for an excellent description of this concept.