Z-Index無法在頂部導航菜單和子菜單上工作

Question

我在頂部導航上有一個z-index問題，帶有一個菜單及其子菜單，我希望菜單重疊子菜單，我已經設置菜單的z-index高於子菜單，但它不工作子菜單是重疊菜單默認情況下。

請查看並建議任何可行的方法。

的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索引：

http://jsfiddle.net/SaNJA/

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

確保為鏈接添加背景顏色，否則您仍然可以看到它。