Background disappears when my menu items are horizontal

I have the following HTML code:

<div id="topo">
    <div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
    </div>
</div>

And the following CSS:

#topo {
    background-color: #1a1e27;
    color:#FFFFFF; 
    width:950px;
}
#topo li {
    display:inline;
    float: left;
    margin-left: 5px;
} 

When I leave this whole code, it loses the background #1a1e27 but leaves my menu horizontal. When I shoot all #topo li {} , it assigns the background color.

What am I doing wrong?

I noticed some problems: Since you used display: inline, float is not necessary,
and since there is <a> , the white color of <li> is not working.

This css solves both problems:

#topo {
   background-color: #1a1e27;
   width:950px;
}
#topo li {
   display:inline;
   margin-left: 5px;
}
#topo a {
   color:#FFFFFF; 
}

When you float the elements inside a container , it behaves as if it were empty – therefore without dimensions, and without background. The solution is to put overflow: hidden on the container to “clean” the floats. Also note that float: left overrides display: inline . CSS can look like this:

#topo {
    background-color: #1a1e27;
    color:#FFFFFF; 
    width:950px;
    overflow: hidden;
}
#topo li {
    float: left;
    margin-left: 5px;
} 

link

Or, as Bacco has suggested, you can put your <li> inline, without floating them.