[英]z-index not working on CSS dropdown menu
我有一個CSS驅動的簡單下拉菜單,可以在較窄的屏幕上以雙行顯示。
當我激活其中一個頂行項目的下拉列表時,下拉列表顯示在與底行相同的“Z”級別。
我以為我已經根據需要設置了z-index,但它在Chrome,Firefox,Safari或iPhone中無效。
以下是一個示例: http : //jsfiddle.net/bNBp3/ - “Meat”附有下拉列表。
<ul id="main-navigation">
<li><a href="/" title="Go to the Home page"><span>Home</span></a>
</li>
<li><a href="/meat/" title="Go to the Meat page"><span>Meat</span></a>
<ul>
<li><a href="/meat/bacon/" title="Go to the Bacon page"><span>Bacon</span></a></li>
<li><a href="/meat/ham/" title="Go to the Ham page"><span>Ham</span></a></li>
<li><a href="/meat/pork/" title="Go to the Pork page"><span>Pork</span></a></li>
</ul>
</li>
<li><a href="/vegetables/" title="Go to the Vegetables page"><span>Vegetables</span></a>
</li>
<li><a href="/about-us/" title="Go to the About Us page"><span>About Us</span></a>
</li>
<li><a href="/contact-us/" title="Go to the Contact Us page"><span>Contact Us</span></a>
</li>
<li><a href="/a-z/" title="Go to the A-Z page"><span>A-Z</span></a>
</li>
</ul>
ul#main-navigation {
display:block;
border-bottom:1px solid #ccc;
margin:0 auto 0px auto;
min-height:21px;
padding:0;
width:100%;
z-index:11;
clear:both;
}
ul#main-navigation li {
display:block;
float:left;
list-style:none;
margin:0 5px 0 0;
padding:0;
position:relative;
z-index:12;
min-height:22px;
min-width:30%;
}
ul#main-navigation li a {
color:#000;
display:block;
padding:2px;
text-decoration:none;
z-index:13;
}
ul#main-navigation li a.current, ul#main-navigation li a.section {
color:#fff;
}
ul#main-navigation li ul {
background:#eee;
position:absolute;
left:-1px;
top:21px;
display:none;
overflow:hidden;
padding:0px;
z-index:14;
width:100%;
border:1px solid #ccc;
}
ul#main-navigation li ul li {
display:block;
float:none;
margin:0;
z-index:15;
width:100%;
border-bottom:1px solid #ccc;
}
ul#main-navigation li ul li a {
background:#eee;
display:block;
color:#333;
z-index:16;
zoom:100%;
}
ul#main-navigation li ul li a:hover {
background:#fff;
}
ul#main-navigation li:hover {
background:#eee;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}
ul#main-navigation li:hover a.current {
background:#eee; color:#000;
}
ul#main-navigation li:hover ul {
display:block;
}
只是擺脫所有的z-index
值,它工作正常:
在Chrome和Firefox6中測試過。
編輯:似乎我忘了從演示中的ul#main-navigation li ul
中刪除z-index,這就是它的工作原理,所以只需將其設置為任何值1或更高。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.