inline UL for menu does not render background of parent element

The following is my HTML and CSS. The I'm expecting a nav bar with background color 4d4030 but not background is rendered. Anyone have nay ideas? Thanks!!

       <div id="nav">
            <ul>
                <li>Home</l开发者_高级运维i>
                <li>About Us</li>
                <li>Clients</li>
            </ul>
        </div>



#nav {
    background-color: #4d4030;  

}



#nav ul{
    padding: 0;
    float: left;  
}

#nav ul li{    
    display: inline;         
}

#nav ul li a{
    float: left; text-decoration: none;
    color: #FFFFFF;
    padding-left: 25px;
    padding-right: 25px;
    font-size: 18px;
    display: block;
    border-right: 1px #FFFFFF;
}

this will solve your issue

#nav {
    background-color: #4d4030;  
    overflow:hidden;
}

demo http://jsfiddle.net/gaby/Gb22V/

That's because you float the only child for the nav element which is the ul element. This makes the height of the nav element equal to 0. Clear your float by adding an overflow: hidden declaration (or using any other method to clear floats) to nav and it will work.

#nav {
    background-color: #4d4030;  
    overflow: hidden;
}

See fiddle.

HTML

   <div id="nav">
        <ul>
            <li>Home</li>
            <li>About Us</li>
            <li>Clients</li>
        </ul>
        <div class="clear"></div>
    </div>

CSS

.clear
{
   clear: both;
}