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

Question

I have created a dropdown menu and now want a background that drops down along with it. Here is some of my code:

HTML:

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

CSS:

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

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

(I know there is something wrong with this code, this is what I picked up so far from the Internet...) li are the list items that comprise my menu.

In the HTML code, the "background" divider is inside and at the end of another divider which contains the dropdown menu:

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

ul is my unordered list which contains the menu.

What I want is to have the menu drop down along with the background. The background should also cover (be on top) of the text that comes immediately after the menu. (The menu drops onto the text).

I would have loved to post a picture to make it a little clearer but I don't have enough reputation points yet... sorry :S

If possible I'd like to do it only using css, but I'm also open for other solutions. Any ideas?

Answer 1

Your css is for a child of the li

This html code for your CSS

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

The background of your HTML is the sibling of navmenu.

This CSS code for your HTML to show background when hovering over navmenu.

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

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

If you want to do that from the LI you would need a parent's, sibling selector. I don't have one and would like one but jQuery could do the trick.

Adjacent Sibling (+) combinator is available in Internet Explore 7 plus and is CSS 2.1 standard.

Assuming you want the background someplace other than inside the li block, position:relative it to the area you want it to appear.