Question

CSS-Menu中的z-index存在问题。我用嵌套的ul标签构建了菜单。

显然，第一个ul是菜单层次结构中的第一个级别。作为第一个ul的背景属性，我设置了渐变和盒子阴影，当然都是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，或者只是不可能？

Answer 1

我有一个解决方法。通过在具有自己阴影的嵌套UL上方插入DIV，您可以将其放在子菜单的顶部。

请参阅：http://jsfiddle.net/SLkrN/6/

Answer 2

在一些测试之后的简短回答似乎是：即使将所有元素设置为浮动，父.menu ul中子菜单的包含也会导致它们不响应z-index更改，除非相对而言，永远不会低于父母UL。我会继续尝试。但是，我可以建议将子菜单放低，以便它们至少与父ul的底部内联？

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

嵌套UL中的Z-index

2 个答案: