如何让这个下拉列表在其他元素之上 [英] How do I get this dropdown to be on top of the other elements

问题描述

我有一个下拉菜单，如下所示：

I have a dropdown menu, that looks like this:

<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样式：

This is the css I use to style it:

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

但它属于内容的其余部分，如下：

But it falls under the rest of the content, like this:

![enter image description here][1]

如何才能让它在它之上？

How can I get it to be on top of it?

推荐答案

为您的主 ul ，但似乎是在静态位置（因此 z -index 没有效果）：尝试使用

you defined a z-index for your main ul but it seems to be in static position (so z-index has no effect) : try with

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

这篇关于如何让这个下拉列表在其他元素之上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！