html - UL LI 下拉菜单上的 z 索引

Question

我需要一些帮助来将 z-index 放入下拉菜单中。我需要为下拉菜单本身设置至少 10 的 z 索引，以便它将位于菜单栏中所有其他图像的顶部。但到目前为止，我已经尝试了所有位置和 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