CSS and the float property

I'm trying to make a CSS/javascript dropdown menu (based on this example. This works. But I want to have a background color for my whole menu. I tried to place the <ul&开发者_Go百科gt; inside a div and give this div a background color. However, the actual menu items do not appear inside the div when I view the page, they are under it. After some experimenting, I found out that this was caused by setting float: left; on the li elements that comprises the main menu items. (of cause, taking float: left; away means that the menu items are stacked on top of eachother in stead of side by side).

Does anyone know how to fix this?

If you are just trying to get a background color for your main menu items, you can add overflow:auto; or float:left; to the containing div tag.

If you want to set the background color of the sub-items, add it to the li ul rule.

Brief example here: http://www.danfsmith.com/so/css/suckerfish/menu.html

try adding the CSS property overflow: auto; to your <div/> or <ul/> which has the background.

I think what you are asking is how to set a background color for each link in your dropdown menu. If you create the menu with:

<ul class="navigation"> 
<li id="youarehere"><a href="http://example.com">Home</a></li> 
<li><a href="http://example.com/blog/">Blog</a></li> 
<li><a href="http://example.com/papers.html">Papers</a></li> 
<li><a href="http://example.com/programs.html">Programs</a></li> 
<li><a href="http://example.com/activities.html">Activities</a></li> 
<li><a href="http://example.com/contact.html">Contact</a></li> 
<li><a href="http://example.com/about.html">About</a></li> 
</ul> 

Then the CSS to set the background color is:

ul.navigation li a {
    width: 111px;
    padding: .5em 1em;
    background-color: #993333;
    color: #fff;
    text-decoration: none;
    text-align: left;
    float: left;
    border-bottom: solid 0px #fff;
    border-top: solid 0px #fff;
    border-left: solid 1px #000;
}

If you want the background colour for the div to show you'll need to clear the floats.

<div style="background-color: red">
<ul>
<li>asda</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
 <span style="clear: both"></span>
</div>

Notice the span with the "clear: both" style in. That should do it.

Heres a link to a nice quirks mode post about it

http://www.quirksmode.org/css/clearing.html