爲什麼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在此菜單中不起作用？

回答

相關問題