Question

我无法解决这个问题。我做了一个下拉菜单，它运行正常，但子菜单出现在主菜单上方。我试过摆弄z-index，但我无法理解。（我非常喜欢新手，所以如果我的代码很乱，我会道歉。）

这是一个JSFiddle：https://jsfiddle.net/jpyaz84L/

子菜单ul应该从主菜单项下方下拉并淡入。

HTML

for (final Event e : list) {

CSS

<ul id="nav">
  <li class="main"><a href="http://www.google.com">Main Item</a>
    <ul>
      <li class="sub"><a href="http://www.google.com">Sub 1</a></li>
      <li class="sub"><a href="http://www.google.com">Sub 2</a></li>
    </ul>
  </li>
</ul>

Answer 1

ul#nav
{
    /* No z-index */
}
li.main ul
{
    /* Negative z-index */
    z-index:-1;
}

你需要从父ul获取z-index并给孩子ul一个负z-index（你几乎就在那里：D）

使用代码的工作示例：https://jsfiddle.net/jpyaz84L/1/

来源：How to get a parent element to appear above child

子菜单与主菜单项重叠

1 个答案: