使用css将鼠标悬停在菜单上时显示div

Question

我创建了一个下拉菜单，现在想要一个随之下降的背景。以下是我的一些代码：

HTML：

<div id="background"></div>

CSS：

div#background{
height: 150px;
background-color: white;
display: none; }

ul#navmenu li:hover div#background
{
    display: block;
}

（我知道这段代码有问题，这是我到目前为止从互联网上找到的...） li是构成我的菜单的列表项。

在HTML代码中，“背景”分隔符位于另一个包含下拉菜单的分隔符的内部和末尾：

<div id="menu">
<ul id="navmenu"></ul>
<div id="background"></div>
</div>

ul是我的无序列表，其中包含菜单。

我想要的是让菜单随背景一起下拉。背景也应该覆盖菜单后面的文本（位于顶部）。 （菜单会显示在文本上）。

我会喜欢张贴一张照片以使其更清晰但我还没有足够的声望点......对不起：S

如果可能，我只想使用css，但我也愿意接受其他解决方案。有什么想法吗？

Answer 1

你的CSS适合李的孩子

这个CSS的HTML代码

<div id="menu">
<ul id="navmenu"><li><div id="background"></div></li></ul>
</div>

HTML的背景是navmenu的兄弟。

此HTML代码，用于在将鼠标悬停在navmenu上时显示背景。

<style>
div#background{
height: 150px;
background-color: white;
display: none; }

ul#navmenu:hover +div#background
{
    display: block;
}
</style>

如果你想从LI那里做，你需要一个父母的兄弟选择器。我没有一个并想要一个，但jQuery可以做到这一点。

相邻的Sibling（+）组合器可在Internet Explore 7 plus中使用，并且是CSS 2.1标准。

假设您希望背景位于li块内的其他位置，请将其相对于您想要显示的区域。