CSS3下拉菜单z索引问题

Question

我想创建CSS3多级下拉菜单，我已经在互联网上找到了一些例子。

我决定使用这一个是因为它有很好的动画(不幸的是，在实际的用例中不能正常工作)：http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-DropdownMenu/index.html

我的问题：

1. 我不能以任何方式解决第二级z-索引问题(它开始在第一个下拉列表的顶部动画，它应该在下面)。谁能给我指明正确的方向？
2. 有更好的CSS3只有下拉菜单吗？我正在寻找的东西，将工作与任何数量的水平，并将表现良好的所有决议。

Answer 1

Z-索引比它看上去更复杂。您的元素可能处于不同的“堆叠上下文”中，这意味着它们的z索引不直接交互。在DOM层次结构中跟踪这两个相互冲突的元素，直到您到达一个共同的祖先。开始在那里分配您的z索引，然后按您的方式返回。

这里有一篇关于堆叠上下文的文章：context

在下面的示例中，如果#content重叠#nav，您将开始在#header和#content上设置z索引。根据其他CSS和标记的不同，您可能需要继续深入到#nav和#content-包装器中才能正常工作。

<div id="page">
  <div id="header">
    <div id="nav"><ul><li>etc</li></ul>
  </div>
  <div id="content">
    <div id="content-wrapper">
      Blah
    </div>
  </div>
</div>

Answer 2

z-index属性指定元素的堆栈顺序。堆栈顺序更大的元素总是在堆栈顺序较低的元素前面。

试着给Z-指数从低到高的顺序。确保页面上的其他元素没有定义z索引。

如果不起作用，我想看看您的页面/代码。