Question

我有一个简单的下拉菜单。当我在菜单下添加其他元素时（例如文本），即使下拉菜单被选中，它们仍然可见。下拉菜单以某种方式与其下的内容合并，导致难看的叠加内容。

这是我的css：

ul#menu, ul#menu ul{
    margin: 0px;
    padding: 0px;
}

ul#menu li{
    width: 160px;
    margin: 4px 0px 0px 4px;
    padding: 5px;
    list-style: none;
    position: relative;
    float: left;
    background: #eef;
    border: #bbf solid 1px;
}

ul#menu li ul li{
    width: auto;
    margin: 4px 0px 0px 0px;
    float:none;
    display: none;
    background: #ddf;
    border: #bbf solid 1px;
}

ul#menu li:hover ul li{
    display: block;
}

ul#menu li:hover{
    background: #ddf;
}

ul#menu li ul li:hover{
    background: #ccf;
}

ul#menu li img{
    margin-right: 10px;
}

这是我的HTML：

<ul id="menu">
    <li>
        <span><img src="images/logos/file_small.png"><a href="#">Bilan</a></span>
        <ul>
            <li id="creer"><img src="images/logos/add_small.png"><a href="#">Créer</a></li>
            <li id="consulter"><img src="images/logos/other_small.png"><a href="#">Consulter / Modifier</a></li>
        </ul>
    </li>
    <li>
        <span><img src="images/logos/chartbar_small.png"><a href="#">Extract</a></span>
        <ul>
            <li><img src="images/logos/pdf_small.png"><a href="#">Pdf</a></li>
            <li><img src="images/logos/xls_small.png"><a href="#">Excel</a></li>
        </ul>
    </li>
    <li>
        <span><img src="images/logos/first_small.png"><a href="#">Module Conso/Gene</a></span>
    </li>
</ul>

我希望你能提供帮助。：）

Answer 1

我看到的主要问题是，当您的菜单“显示”时，它正在推动它下面的东西。您希望将嵌套列表的位置设置为absolute，以将其从页面流中删除：

#menu li ul { position: absolute; }

这将使菜单显示在文本/内容上而不是将其推下。

还有一件事 - 你想要为同一个ul添加一些定位 - 左0;和前25px; （或者周围的某些东西，以适应你想要的样子。）

Answer 2

http://jsfiddle.net/chrisvenus/GRfDT/2/是您修改和解决方案的缩影。

我所做的是首先修改边距以确保文本出现在正确的位置（即增加上边距）。

然后我修改了该文本的z-index，将其放在菜单后面。您也可以修改菜单的z-index，最好在两者上放置z-index。

<div style="position: absolute; margin-top: 50px; z-index: -1"> SOME CONTENT </div>

z-index基本上是为了这个目的而设计的 - 确定内容从背景到前景的顺序。有关详细信息，请参阅http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index

此外，我还要注意，kinakuta，虽然在你的问题得到充分解释之前回复，但你应该把菜单设为绝对而不是跟随它的内容。主要是因为我怀疑它将意味着更整洁的HTML整体，因为它会阻止你拥有一个包含所有其他内容的容器，或者制造比你想要的更多的东西，或者最糟糕的情况是让每个人都考虑到它，所以有些东西会被移动以其他方式关闭或覆盖你的绝对文本......

类似这样的事情：http://jsfiddle.net/chrisvenus/GRfDT/3/（与以前相同，但有一些关于位置：绝对的地方的交换）

下拉菜单不应该是透明的

2 个答案: