Why aren't my z-index declarations working?

Question

I have a menu uses nested unordered lists to give the appearance of a secondary dropdown menu. This is working well for the most part. I recently refactored the CSS code to make it cleaner and easier for me to understand, but now I can't seem to get the secondary (dropdown) menu to appear behind the top-level menu. Both elements have positions declared.

The HTML is fairly straightforward and I don't think there's any problem here:

<div id="header-menu">
    <ul>
        <li><a href="#">what</a></li>
        <li><a href="#">what</a>
            <ul>
                <li><a href="#">what</a></li>
                <li><a href="#">what</a></li>
                <li><a href="#">what</a></li>
            </ul>
        </li>
        <li><a href="#">what</a></li>
        <li><a href="#">what</a></li>
        <li><a href="#">what</a></li>
    </ul>
</div>

The CSS, however, is doing things that I don't really understand.

    #header-menu > ul > li {
        font-size: 2em;
        display: inline;
        position: relative;
        }

    #header-menu > ul > li:hover {
        background: #a4b0ac;
        padding: 25px 0;
        }

    #header-menu > ul > li > a {
        padding: 25px;
        position: relative;
        z-index: 100;
        }

    #header-menu li > ul {
        display: none;
        position: absolute;
        z-index: 99;
        background: #CC6601;
        }

    #header-menu li:hover > ul {
        display: block;
        }

    #header-menu li ul > li {
        font-size: 0.8em;
        display: block;
        position: relative;
        }

    #header-menu li ul > li a {
        padding: 10px;
        display: block;
        }

    #header-menu li ul > li a:hover {
        background: #a4b0ac;
        display: block;
        }

Answer 1

Hi Noah,

I tested this in Firefox 3.6 on Windows and it appears to work fine. That is, the secondary menu is appearing under the primary menu. Perhaps you could give us a screenshot of what you're seeing?

Cheers, Scott

Answer 2

EDIT: Misread your question initially.

You can't put different z-indexes (z-indices?) on elements that are nested in that way because inside of one element cannot hide behind itself while the rest of it shows. You'll have to un-nest these and then apply the z-index, or remove the conflicting reference in the first z-index applied to <a>.

Answer 3

I looked at in in IE7, FF3.5, and Chrome (4.0.249.8).

It looked great in Chrome (drop down under the second menu item), in IE7 the drop down was under the third menu item, and in FF it was under the first menu item. Is this part of the problem? If is is, I believe it is a "position" (relative/absolute) problem vs. a "z-index" problem.

Also, with regard to z-index, I believe that IE resets the z-index stack whenever you change the position along the hierarchy. In your example, the css changes from "relative" to "absolute". Maybe that has to do with it?