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;
}

The various levels of the menu are created by nesting lists inside of lists. Take a very close look at this markup:
<div id=”multi_drop_menus”>
<ul>
<li><a href=”#”>Item 1</a>
<ul>
<li><a href=”#”>Item 1a</a></li>
<li><a href=”#”>Item 1b</a></li>
</ul>
</li>
<li><a href=”#”>Item 2</a></li>
</ul>
</div>
I have added a second unordered list inside the fi rst list item, which is highlighted; this is the drop-down menu. Note exactly where it is placed—right before its parent list item closes. Observe how the closing element of the top-level list item follows the entire secondlevel list. You have to get this organization right or your menu won’t drop down. Let’s take a look at how this arrangement displays.

Because we haven’t written any specifi c styles for the drop-down yet, the drop-down, simply inherits the styles from the top level and aligns itself horizontally, as you can see from Figure 6.43. Of course, in order for it to be a drop-down menu, we need it to stack vertically instead. The way to do this is to create the absolute/relative positioning relationship between the two levels of the menu that we have seen several times by now.