Designer’s Css Course

I first use the universal selector * to remove the default margins and padding of all the elements. Then I style the border of the div green, the ul red, and the li blue. Finally, I make the background of the innermost element, the link (a), a pale gray—that is going to be the background color of the menu choices for now.

The block level elements fiTll the width of the browser window and the link, which as an inline element, shrink-wraps its
content. The list items (li) are presently stacked above each other, which is perfectly correct because they are block level elements. Of course, for a horizontal menu, we need them to sit side-by-side, so let’s fl oat them, so that they do that (Figure 6.38). We modify the li rule so it looks like this

#multi_drop_menus li {
border:2px solid blue;
list-style-type:none;
fl oat:left;
}

Hmm, what happened to our boxes? Well, once we fl oat the list items, there is no un-fl oated content in the ul (and therefore the parent div) so both close up, and the list items hang down. We really want those elements to enclose the list items, so what’s to be done?

If you said “Float them, too!” then you obviously were paying attention in the previous posts, as this simple step solves the problem nicely.

#multi_drop_menus {
border:3px solid green
fl oat:left;
}
#multi_drop_menus ul {
border:2px solid red;
float:left;
}