navigation menu issues with css (background is not appearing behind the whole div)

Question

I am writing a css code for a webpage, i have a navigation menu on the top with the code:

    <div class="nav-menu">
        <ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Tell a friend</a></li>
            <li><a href="#">Mission</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </div>

The css for nav-menu include:

.nav-menu {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    background: url(bgcolor.jpg) repeat-x;
}

.nav-menu li {
float: left;
}

.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;  
}

.nav-menu li a {
background: url(bgcolor.jpg) repeat-x;
line-height: 36px;
height: 40px;
float: left;
width: 9em;
border-top: 1px solid #01607E;
border-right: 1px solid #01607E;
border-bottom: 1px solid #01607E;
color: white;
font-family: "Lucida Sans";
font-size: 10pt;
text-decoration: none;
text-align: center;
}

However, it is not showing bgcolor.jpg behind the whole div, it is just showing it behind the (li) boxes and not behind the while div. Can anyone see what the problem is here?

Thank you for your help (if you need more explanation about the problem please ask and i will edit this with answers)

Answer 1

Sounds like a floating issue. Try this:

.nav-menu {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    background: url(bgcolor.jpg) repeat-x;
    overflow:hidden;
}

Or if that doesn't work:

.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;  
    overflow:hidden;
}

Answer 2

Your container div is collapsing because height is not inherited from list items. Add a clear after the ul:

        <div class="nav-menu">
        <ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Tell a friend</a></li>
            <li><a href="#">Mission</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
<div style="clear:both;"></div>
    </div>