Перекрытие, которое не может быть исправлено

Question

У меня есть это:

<div id="header">
    <ul id="menu-li">
        <li class="menu-li with-sublist">
            <a class="left" href="#">A</a>
            <ul class="submenu-list">
                <li><a href="#">A1</a></li>
                <li><a href="#">A2</a></li>
                <li><a href="#">A3</a></li>
            </ul>    
        </li>
        <li class="menu-li"><a class="middle" href="#">B</a></li>
        <li class="menu-li"><a class="middle" href="#">C</a></li>
        <li class="menu-li"><a class="right" href="#">D</a></li>
        <li class="clear"><!-- --></li>
    </ul>
</div>

<div id="main-content">
<!-- jquery cycle and more stuff here -->
</div>

.menu-li - горизонтальный список, li элементы имеют float:left.Таким образом, .submenu-list заполняется вертикально и перекрывается на #main-content div, который содержит слайд-шоу цикла jquery.Проблема в том, что .submenu-list появляется за #main-content - очевидно, я бы хотел, чтобы оно отображалось поверх него.

Я пробовал много z-index экспериментов, но безуспешно.Я склонен подозревать, что что-то еще не так.

Есть идеи?

Answer 1

Если вы хотите использовать z-index, не забудьте включить position в абсолютное или относительное значение (и вы не можете использовать float непосредственно в этом элементе, но вы можете поместить другой элемент поверх этогоэлемент, например: http://jsfiddle.net/toopay/xLk8a/)

Answer 2

В этом случае z-index не будет работать, поскольку элемент ul.submenu-list ограничен высотой элемента заголовка. Вам нужно будет использовать position absolute, а затем динамически устанавливать свойства top и left элемента на основе позиции li.