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;
}

UL LI下拉菜单上的z-index

1 个答案:

DEMO