Designer’s Css Course

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.