Question

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

我决定使用这个，因为它有很好的动画（遗憾的是在现实生活用例中不能很好地工作）：http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-DropdownMenu/index.html

我的问题：

我无法以任何方式解决二级z-index问题（它开始了动画在第一个下拉列表的TOP上，它应该在下面它）。谁能指出我正确的方向？
有没有更好的CSS3下拉菜单？我在找可以使用任意数量级别的东西，并且可以在所有分辨率上表现良好。

Answer 1

z-index属性指定元素的堆栈顺序。堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。

尝试按从低到高的顺序给出Z指数。确保页面上的其他元素尚未定义z-index。

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

Answer 2

z-index比它看起来更复杂。您的元素可能位于不同的“堆叠上下文”中，这意味着它们的z索引不会直接交互。跟踪DOM层次结构中的两个冲突元素，直到达到共同的祖先。开始在那里分配你的z-index，并继续前进。

这是一篇关于堆叠上下文的文章： https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context

在下面的示例中，如果＃content-wrapper重叠#nav ul li，您将开始在#header和#content上设置z-index。根据其他CSS和标记，您可能需要在工作之前继续使用#nav和＃content-wrapper。

<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>

CSS3下拉菜单z-index问题

2 个答案: