html - 子菜单重叠主菜单项

Question

我在尝试解决这个问题时不知所措。我制作了一个下拉菜单，它运行正常，但子菜单出现在主菜单上方。我试过摆弄 z-index，但我想不通。 (我是一个新手，所以如果我的代码困惑，我深表歉意)。

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

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

HTML

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

CSS

ul#nav {
  position:relative;
  display: inline; 
  list-style-type: none;
  font-family: Helvetica;  
  padding: 15px 5px 15px 0;
}
li.main {
  position: relative;
  width: 250px;
  font: 14px Roboto;
  display: inline-block;
  background: #eef4ff;
  margin-right: -4px;
  cursor: pointer;
  z-index: 1;
  -webkit-transition: all 0.2s;
}
li.main a {
  display: block;
  padding: 15px 90px;
  color: inherit;
  text-decoration: none;
}
li.main:hover {
  background: #548cff;
  color: #FFFFFF;
}
li.main ul {
  position: absolute;
  top: 0px;
  left:-40px;
  display: block;
  list-style-type: none;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
li.main:hover ul {
  top: 47px;
  visibility: visible;
  display: block;
  opacity: 1;
  -webkit-transition: all 1s;
}
li.sub {
  width: 225px;
  background: #6F6F6F;  
  color: #F0F0F0;
  opacity: .985;
}
li.sub a {
  background:inherit;
  color: inherit;
  display: inline-block;
  padding: 17px 90px;
  text-decoration:none;
}
li.sub:hover { 
  background: #888888; 
  color: #FFFFFF;
}

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