Set background color of a ul list

Is it possible to use CSS to set the background color of a ul or would I have to put it in a div and then set the background color of the div?

Random Code.


[size=3]ul#navlist
            {
            padding: 0;
            margin: 0;
            list-style-type: none;
            float: left;
            width: 100%;
            color: #fff;
            background-color: #036;
            }
            
            ul#navlist li { display: inline; }
            
            ul#navlist li a
            {
            float: left;
            width: 5em;
            color: #fff;
            background-color: #036;
            padding: 0.2em 1em;
            text-decoration: none;
            border-right: 1px solid #fff;
            }
            
            ul#navlist li a:hover
            {
            background-color: #369;
            color: #fff;
            }
            
            
            <ul id="navlist">
            <li><a href="#">Item one</a></li>
            <li><a href="#">Item two</a></li>
            <li><a href="#">Item three</a></li>
            </ul>[/size]


just give the ul list the color backround property.

As BlakeAnthony showed it is possible.

To show a background it needs to have an area for it, I guess your list-items are floated and the list therefore has collapsed its height. BlakeAnthony used float to make the list enclose floated content, another possibility is to just set the height or, if the height can vary, clear the floats inside the list with a trigger for hasLayout for IE6 and overflow:hidden for better browsers. :slight_smile: