z-index не работает в выпадающем меню - PullRequest
Новая
       15

z-index не работает в выпадающем меню

6 голосов
/ 11 апреля 2011

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

<ul class="menu">
   <li><a href="">Menu Item 1</a>
      <ul class="sub-menu">
         <li><a href="">Sub Menu Item 1</a></li>
      </ul>
   </li>
</ul>

и у меня есть следующие правила CSS: 

.menu {float:left}
.menu > li {position:relative; float:left}
.menu > li > a {display:block}
.sub-menu {display:none; z-index:100; position:absolute; top:40px; width:180px;}

Я использую JavaScript для отображения выпадающего меню.

У меня проблема в том, что подменю появляются под слайд-шоу, которое у меня близко к навигации. Неважно, насколько высоко или низко я установил z-индекс .sub-menu, ничего не меняется.

Кто-нибудь знает, что может привести к тому, что z-index вообще не будет работать?

Спасибо.

РЕДАКТИРОВАТЬ: проблема со всеми браузерами. Тестирование в Firefox, Chrome и Internet Explorer

Ответы [ 3 ]

7 голосов
/ 11 июня 2012

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

1 голос
/ 26 апреля 2012

Отметьте z-index элементов, которые должны появиться выше. убедитесь, что они ниже. Также убедитесь, что у родительского элемента нет скрытого переполнения.

0 голосов
/ 11 апреля 2011

Установите Z-индекс родительского элемента, а затем установите Z-индекс дочернего. 

.menu > li {position:relative; float:left; z-index :100}
.sub-menu {display:none; z-index:200; position:absolute; top:40px; width:180px;}
...