Z-индекс во вложенном UL - PullRequest
Новая
       19

Z-индекс во вложенном UL

3 голосов
/ 31 августа 2011

У меня проблема с z-index в CSS-меню. Я построил меню с вложенными тегами ul.

Очевидно, что первый ul - это первый уровень в иерархии меню. В качестве background-свойства этого первого ul я установил градиент и box-shadow, конечно же, с помощью CSS.

Второй ul (вложенный) - это второй уровень в иерархии меню. Я дал ему серый цвет фона.

К сожалению, второй ul перекрывает первый ul. Я пытался поиграться с z-index, но не могу заставить его работать. Я хотел бы получить тень первого ul над вложенным ul.

Вот код, который вы можете воспроизвести:

CSS: 

ul.menu {
    /* Gradient: */
    background: #444;
    background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777));
    background: -moz-linear-gradient(top,  #999,  #777);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999', endColorstr='#777');
    height: 25px;
    /* Box-Shadow: */
    -moz-box-shadow: 1px 3px 3px #888;
    -webkit-box-shadow: 1px 3px 3px #888;
    box-shadow: 1px 2px 3px #888;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    position: relative;
    z-index: 20;
}

ul.menu, ul.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.menu a {
    display: block;
    text-decoration: none;
    color: #000;
    line-height: 22px;
    padding-right: 15px;
    padding-left: 15px;
}

ul.menu li {
    padding:0;
    margin:0;
    float:left;
}

ul.menu ul {
    margin-left: 15px;
    padding: 0;
    position: absolute;
    display: none;
    background-color: #CCC;
    z-index: 10;
}

ul.menu li:hover ul  {
    display: block;
}

ul.menu ul li {
    float: none;
}

Вот HTML: 

<ul class="menu">
  <li><a href="#">ONE</a>
    <ul>
      <li><a href="#">SUB_ONE</a></li>
      <li><a href="#">SUB_TWO</a></li>
      <li><a href="#">SUB_THREE</a></li>
    </ul>
  </li>
  <li><a href="#">TWO</a></li>
  <li><a href="#">THREE</a></li>
</ul>

Есть ли способ, которым первый ul перекрывает второй ul, или это просто невозможно?

Ответы [ 2 ]

4 голосов
/ 31 августа 2011

У меня есть обходной путь. Вставив DIV над вложенным UL, который имеет собственную тень, вы можете получить его в верхней части подменю.

См .: http://jsfiddle.net/SLkrN/6/

0 голосов
/ 31 августа 2011

Краткий ответ после некоторого тестирования выглядит так: даже при установке всех элементов в плавающее положение подменю в родительском элементе .menu ul заставляет их не реагировать на изменения z-индекса, кроме как относительно, никогда не уменьшаясь ниже родительского UL. Я продолжу экспериментировать. Могу ли я, однако, предложить расположить подменю ниже, чтобы они были как минимум выровнены с нижней частью родительского элемента ul? 

ul.menu ul {
    margin-left: 15px;
    margin-top: 5px;
    padding: 0;
    position: absolute;
    display: none;
    background-color: #CCC;
    z-index: 10;
}
...