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

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>.