CSS3下拉菜单z-index问题答案

【问题标题】：CSS3 Drop-down menu z-index issueCSS3下拉菜单z-index问题
【发布时间】：2012-10-28 10:53:16
【问题描述】：

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

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

我的问题：

我无法以任何方式修复二级 z-index 问题（它开始在第一个下拉列表的顶部制作动画，它应该在下面它）。谁能指出我正确的方向？
有没有更好的仅限 CSS3 的下拉菜单？我在找可以在任意数量的关卡中使用，并且在所有分辨率下都表现良好。

【问题讨论】：

标签： html css drop-down-menu css-transitions

【解决方案1】：

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

这是一篇关于堆叠上下文的文章： 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>

【讨论】：

谢谢！我解决了这个问题。还有一个问题 - “同一级别”的元素没有指定背景颜色，这使它看起来无法正常工作z-index。

【解决方案2】：

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

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

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

【讨论】：

谢谢！我提供了完整代码的链接（没有工作示例）。我认为问题出在background-color 上，因为单独使用z-index 和position 无法使其显示正常。我已经测试了一切。