UL LI下拉菜單上的z-index

Question

在將Z-index放入下拉菜單時，我需要一些幫助。 我需要給下拉菜單加上至少10的z-index，以便它位於菜單欄中其他所有圖像的頂部。 但是到目前為止，我已經嘗試了所有帶有位置和z-index的內容，但是沒有任何效果。

到目前為止，這是我的代碼

<ul id="cssdropdown">

    <li class="headlink">
        <a href="http://google.com/">HOME</a>

        <ul>
            <li><a href="http://google.com/">Google</a></li>
            <li><a href="http://yahoo.com/">Yahoo</a></li>
            <li><a href="http://live.com/">Live Search</a></li>
        </ul>
    </li>

 #cssdropdown, #cssdropdown ul {
    list-style: none;
}

    #cssdropdown, #cssdropdown * {
    padding: 0;
    margin: 0;
}

    /* Head links */
#cssdropdown li.headlink {
    width: 120px;
    height:70px;
    float: left;
    text-align: center;
}
#cssdropdown li.headlink a {
    display: block;
    padding-top:25px;
    padding-bottom: 15px;
    height: 30px;
    font-size:30px; 
    text-align:center;
    cursor:pointer;
}

    /* Child lists and links */
#cssdropdown li.headlink ul {
    display: none;
    border-top: 1px black solid;
    text-align: left;
}
#cssdropdown li.headlink:hover ul {
    display: block;
}
#cssdropdown li.headlink ul li a {
    padding: 5px;
    height: 17px;
    font-size:15px;
    cursor:pointer;
}
#cssdropdown li.headlink ul li a:hover {
    background-color: #333;
}

    /* Pretty styling */
#cssdropdown a {
    color: white;
}
#cssdropdown ul li a:hover {
    text-decoration: none;
}
#cssdropdown li.headlink {
    background-color: rgb(0,0,0);
}
#cssdropdown li.headlink ul {
    background-color: rgb(51,51,51);
    background-position: bottom;
    padding-bottom: 10px;
}

有人知道我在這段代碼中做錯了什么嗎？

謝謝！

Answer 1

嘗試添加position:relative父li和position:absolute給孩子ul 。 現在將z-index添加到ul 。

#cssdropdown li.headlink{
  position:relative;
}

#cssdropdown li.headlink ul {
  position:absolute;
  top:100%;
  z-index:10;
}

DEMO