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

对于父母ul和position:absolute;，我使用的是position:relative;，对于孩子ul（.submenu），但z-index仍然不适用于我。我的CSS有什么问题？为什么z-index在此菜单中不起作用？

我想.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

来源

2014-11-25 nightmare

什么是结果，你正在寻找一个较低的z-index？请你多解释一下。 – shadeed9 2014-11-25 13:42:01

您能否说出您寻找的结果是什么？ – w3shivers 2014-11-25 13:42:05

@ w3shivers我想让子菜单隐藏在主菜单后面。 – nightmare 2014-11-25 13:43:10

您可以通过添加以下代码使子菜单下出现的主要原因之一：

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

来源

2014-11-25 13:46:46 shadeed9

如果添加此：

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

而且在.mynav .submenu > li a

来源

2014-11-25 13:47:04

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

回答

相关问题