Question

我正在使用position:relative;用于父ul和position:absolute;用于子ul（.submenu）但仍然z-index对我不起作用。我的CSS有什么问题？

我希望.submenu隐藏在主菜单（.mynav）后面。

HTML

<div class="mynav">
  <ul>
    <li><a href="#about"><span>About</span></a></li>
    <li><a href="#contact"><span>Contact</span></a></li>
    <li>
      <a href="#home"><span>Home</span></a>
      <ul class="submenu">
        <li><a href="#tf"><span>Menu Item</span></a></li>
        <li><a href="#cc"><span>Menu Item</span></a></li>
        <li><a href="#aj"><span>Menu Item</span></a></li>
        <li><a href="#vh"><span>Menu Item</span></a></li>
      </ul>
    </li>
    <li><a href="#social"><span>Social</span></a></li>
    <li><a href="#promote"><span>Promote</span></a></li>
  </ul>
</div>
<div class="content">
  Lorem ipsum
</div>

CSS：

.mynav{
  background: #202020;
  text-transform: uppercase;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  width: 100%;
  text-align:center;
  z-index:9999;
}
a{
  text-decoration:none;
  color: #f91d65;
  color: #fff;
  padding: 15px 30px;
  display:block;
}
.mynav ul{
  z-index:999;
}
.mynav ul li{
  border-left: 1px solid rgba(255, 255, 255, 0.50);
  display: inline-block;
  margin-right: -4px;
  position: relative;
}
.mynav ul li a span{
  display: block;
}
.mynav .submenu{
  position: absolute;
  white-space: nowrap;
  left:0;
  top:50%;
  z-index:99;
}
.mynav .submenu > li{
  display: inline-block;
  background: #999;
}
 .mynav .submenu > li a span{
  display: block;
}

演示：

http://codepen.io/sonu/pen/gbpmbj

Answer 1

您可以通过添加以下代码使子菜单显示在主菜单下：

.mynav .submenu{
  z-index:-1;
}

Answer 2

如果你添加：

 .mynav ul li a {
  position: relative;
  z-index:999;
  background: black;
}

.mynav .submenu > li a

上的较低z-index

为什么z-index在这个菜单中不起作用？

2 个答案: