0

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

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

我的问题：

  1. 我无法以任何方式修复二级 z-index 问题（它在第一个下拉列表的顶部开始动画，它应该在它的下方）。谁能指出我正确的方向？
  2. 有没有更好的仅限 CSS3 的下拉菜单？我正在寻找适用于任意数量级别并且在所有分辨率下表现良好的东西。
4

2 回答 2

1

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

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

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

于 2012-10-27T20:45:43.317 回答
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>
于 2012-10-28T02:53:16.067 回答