Нахлест, который нельзя исправить с помощью

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 заполняется по вертикали и перекрывается с div #main-content, который содержит слайд-шоу цикла jquery. Проблема в том, что .submenu-list появляется за #main-content - очевидно, я бы хотел, чтобы он отображался поверх него.

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

Есть идеи?

jquery html css jquery-cycle

1

nonouco 28 Авг 2011 в 22:39

Answer 1

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

1

toopay 28 Авг 2011 в 19:21

Answer 2

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

1

ShankarSangoli 28 Авг 2011 в 19:05

Нахлест, который нельзя исправить с помощью

2 ответа

Похожие вопросы

Новые вопросы

jquery