Z-индекс против доступности

Question

Вот упрощение моего кода, с которым у меня возникают проблемы, в отношении наслоения.

<ul id="main_menu">
    <li>Option 1
        <ul id="submenu1">
            <li>link</li>
            <li>link</li>                
            <li>link</li>
        </ul>
    </li>
    <li>Option 2
        <ul id="submenu2">
            <li>link</li>
            <li>link</li>                
            <li>link</li>
        </ul>
    </li>
</ul>

Моя проблема в том, что submenu2, кажется, выше варианта 1. Я пытался дать им соответствующие z-индексы, но они, похоже, не работают ... Я предполагаю, потому что submenu2 является дочерним для варианта 2, и не имеет отношения к варианту 1.

Есть идеи, как можно обойти мою проблему?

Я использую большую графику для большинства этих ссылок, так что перекрытие вполне очевидно.

Answer 1

z-index работает только с абсолютно позиционированными элементами. И, как указывают мои комментаторы, относительное и фиксированное позиционирование также. Мое поспешное замечание состояло в том, что этот элемент должен быть удален из обычного документооборота.

Answer 2

Трудно сказать, не видя CSS, но для правильной работы z-index элемент должен быть позиционирован абсолютно, относительно или фиксирован.