Question

I have a drop down menu that is attached to a fixed navigation bar. Similar to the one the current Twitter design uses.

Here is link to this issue: http://jsfiddle.net/JDahp/3/ (This has been updated to be far more simple than previous iterations)

I use jQuery to make the menu appear / disappear which works fine. The menu animates OVER the toolbar as opposed to under it.

I cannot understand why z-index isn’t overriding the usual visual stacking for the drop down menu?

Here are the relevant CSS properties

#top-stuff{
    position:fixed;
    top:0;
    left:0;
    z-index:12;
    width:100%;
}

.dropdown {
    position: absolute;
    z-index: 1;
}

A cut down version of the HTML:

<div id="top-stuff">
    <a href="" class="optionslinka">Options</a>
    <div class="dropdown" id="optionsdropdown">
        <!-- Drop down content is here -->
    </div>
</div>

Answer 1

Your fiddle is a little complex and busy for me to look through, but I think it’s likely your issue relates to the z-index bug that IE is known for (but has affected other browsers as well).

Basically, if z-index isn’t defined on all of your parent containers, then each z-index will start a new ‘stacking context`, meaning they will not overlap properly. Think of 2 decks of cards rather than one.

Try setting position:relative;z-index:auto; on all of the parent containers above .dropdown (or any other position: like absolute etc)

Some resources to learn more:
Drop Down Menu Issues: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
An in depth look: http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/

A similar issue to yours: http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

you’ll notice that any positioned element, with any z-index, that is located lower down in the code than the menus will appear above the menus—no matter what z-index the menu is given—exactly the opposite of what you want to happen.