Html 嵌套UL中的Z索引

我对CSS菜单中的z索引有问题。我用嵌套的ul标签构建菜单

显然，第一个ul是菜单层次结构中的第一级。作为第一个ul的背景属性，我设置了一个渐变和一个方框阴影，当然都是CSS

第二个ul（嵌套的ul）是菜单层次结构中的第二级。我给了它一个灰色的背景色

不幸的是，第二个ul覆盖了第一个ul。我试着玩弄z-index，但我无法让它工作。我想让第一个ul的阴影覆盖嵌套的ul

以下是代码，您可以复制它：

CSS:

以下是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有什么方法吗？或者这是不可能的？

在一些测试之后，简短的回答似乎是：即使将所有元素设置为浮动，父菜单中包含的子菜单也会导致它们对z索引的更改不作出响应，除了相对的，永远不要低于父UL。我会继续试验。但是，我是否可以建议将子菜单放低，以便它们至少与父级

ul

的底部对齐

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

---

我有工作要做。通过在具有自己阴影的嵌套UL上方插入DIV，您可以在子菜单的顶部获得它

---

请参阅：

哎呀。绝对正确。我道歉。我会马上纠正的。是的，我已经试着把子菜单放低了。这没关系，但不是一个好的解决方案。无论如何，谢谢你的实验！也许你能找到解决办法。我也会继续尝试。你考虑过用javascript来解决你的问题吗？可以将子菜单定位在悬停元素上。是的，我确实考虑过使用JavaScript…我也要试试。看起来不太有希望：嘿，真不错。非常感谢你！适用于Firefox、Opera和Safari（尚未在IE中测试）。我只是想看看我是否可以改善阴影的东西，但这绝对是正确的方向！如果你所追求的是阴影，你可以考虑将1px高div移到子代码ULS上面的代码> LI>代码> S，以避免潜在的点击阻塞。我发现了一个不同的解决方案。相同的想法，不同的实现。

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