Z-Index在頂部導航菜單和子菜單上不起作用

Question

我在頂部導航菜單及其子菜單上有一個Z-index問題，我想菜單重疊子菜單，我已經設置了Z-菜單索引高於子菜單，但它不工作子菜單是默認重疊菜單。

請參閱並建議任何可能的方式來做到這一點。

jsFiddle

HTML

<div id="login"> 
<ul> 
<li id="overlap"><a href="#">Log In | Join</a> 
    <ul class="tsm"> 
    <li><a href="#">Log In</a></li> 
    <li><a href="#">Join</a></li> 
    </ul> 
</li> 
</ul> 
</div> 

CSS

#login { 
    margin: 0px auto; 
    width: 1000px; 
    height: 38px; 
    background: #343438; 
} 
#login ul { 
    float: right; 
    margin: 0px; 
    padding: 0px; 
    width: auto; 
    height: 38px; 
} 
#login ul li { 
    float: left; 
    width: auto; 
    height: 34px; 
    display: inline; 
    list-style-type: none; 
} 
#login ul a { 
    color: #FFF; 
    display: block; 
    width: auto; 
    height: 34px; 
    font: bold 16px/34px "Arial Narrow", Arial, sans-serif; 
    text-decoration: none; 
    text-align: center; 
    padding: 0px 15px; 
    text-shadow: 0px -1px #000; 
} 
#login .tsm { 
    padding: 20px; 
    background-color: #F2F2F4; 
    width: 230px; 
    height: auto; 
    text-align: left; 
    border: 4px solid #777; 
    position: absolute; 
    visibility: hidden; 
    top: 32px; 
    right: 0px; 
    z-index: 100; 
} 
#login .tsm li a { 
    width: 230px; 
    height: 30px; 
    margin-bottom: 1px; 
    text-align: left; 
    padding: 0px; 
    text-decoration: none; 
    color: #000; 
    text-shadow: 0px 1px #fff; 
    font: 15px/30px Arial, sans-serif; 
    border-bottom: 1px solid #DDDDDF; 
} 
#login ul #overlap { 
    position: relative; 
    border: 2px solid #900; 
    z-index: 1000; 
} 
#login ul li:hover .tsm { 
    visibility: visible; 
} 
#login ul ul li { 
    border: none; 
} 

Answer 1

問題的事實，你想父定位其子，這會導致以上問題莖 - 如果父母上升一級，所以做它的孩子。相反，Z-索引父列表中，你需要的z-index登錄鏈接（標籤）：

http://jsfiddle.net/SaNJA/

的代碼是粗糙的，但它應該讓你開始。

確保您爲鏈接添加背景顏色，否則您仍然能夠看穿它。