html - 我如何使此下拉列表位于其他元素之上

我有一个下拉菜单，看起来像这样：

<ul id="secondary-nav" class="menu">
    <li><a href="#">boeketten</a>
        <ul>
            <li>7 rododendrons</li>
            <li>7 rozen</li>
        </ul>
    </li>
    <span>∼</span>
    <li><a href="#">bloemstukken</a></li>
    <span>∼</span>
    <li><a href="#">planten</a></li>
    <span>∼</span>
    <li><a href="#">bruidsruikers</a></li>
    <span>∼</span>
    <li><a href="#">kerkdecoratie</a></li>
    <span>∼</span>
    <li><a href="#">evenementen</a></li>
    <span>∼</span>
    <li><a href="#">rouwwerk</a></li>
    <span>∼</span>
    <li><a href="#">rocabo potten</a></li>
</ul>

这是我用来设置样式的CSS：

ul#secondary-nav {
    z-index: 9999;
}

ul#secondary-nav li, ul#secondary-nav > span {
    display:block;
    position:relative;
    float: left;
}

ul#secondary-nav li ul {
    display: none;
    text-align:left;
    padding-left: 0px;
    background-color: red;
}

ul#secondary-nav li ul li {
    float: none;
    display: block;
}

ul#secondary-nav li:hover ul {
    display: block;
    position: absolute;
}

但是它属于其余内容，例如：

![enter image description here][1]

我怎样才能使它处于最佳状态？

最佳答案

您为主z-index定义了ul，但它似乎处于静态位置（因此z-index没有任何作用）：请尝试

ul#secondary-nav {
    z-index: 9999;
    position: relative;
}

关于html - 我如何使此下拉列表位于其他元素之上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12526631/