Почему не работают мои объявления z-index?

Question

У меня в меню используются вложенные неупорядоченные списки, чтобы создать видимость вторичного выпадающего меню. Это работает хорошо по большей части. Недавно я провел рефакторинг CSS-кода, чтобы сделать его более понятным и понятным для меня, но теперь я не могу заставить второе (выпадающее) меню появляться позади меню верхнего уровня. Оба элемента имеют объявленные позиции.

HTML-код довольно прост, и я не думаю, что здесь есть какие-либо проблемы:

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

Однако CSS делает вещи, которые я не совсем понимаю.

    #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

РЕДАКТИРОВАТЬ: изначально неправильно прочитал ваш вопрос.

Вы не можете поместить разные z-индексы (z-индексы?) В элементы, которые вложены таким образом, потому что внутри одного элемента не может скрыться за собой, в то время как остальная часть этого показывает. Вам придется отложить их и затем применить z-index или удалить конфликтующую ссылку в первом z-index, примененном к <a>.

Answer 2

Я протестировал это в Firefox 3.6 на Windows, и, похоже, он работает нормально.То есть вторичное меню появляется под основным меню.Возможно, вы могли бы дать нам скриншот того, что вы видите?

Приветствия, Скотт

Answer 3

Я смотрел в IE7, FF3.5 и Chrome (4.0.249.8).

В Chrome он выглядел великолепно (выпадающий под вторым пунктом меню), в IE7 выпадающий находился под третьим пунктом меню, а в FF - под первым пунктом меню. Это часть проблемы? Если есть, я считаю, что это проблема «позиции» (относительная / абсолютная) по сравнению с проблемой «z-index».

Также, что касается z-index, я полагаю, что IE сбрасывает стек z-index всякий раз, когда вы меняете положение в иерархии. В вашем примере css меняется с «относительного» на «абсолютный». Может быть, это связано с этим?