Creating Drop-Down Menus

Now we need to take our horizontal list a step further and add drop-down choices. CSS-based drop-down menus aren't going to work in Internet Explorer for Mac. I will, however, show you a way you can use CSS so that your menu degrades nicely in this browser and still offers the user an acceptable navigation experience.

In the following exercise, we'll assume that the horizontal menu items each have a related page, and we'll code their responses accordingly. All you need to do is add URLs in place of the # symbols in each link's HRef.

Marking Up Drop-Down Menus

To mark up a drop-down menu, we need to nest a complete list within a list item of the horizontal menu. This nested list becomes the contents of that list item's drop-down menu. Figure 7.21 shows the finished menu so you can see what you are shooting for.

None of the ul or li elements have classes or IDsin fact, the only thing that differentiates this list from a regular nested list is the containing div, with its ID listcontainer, which causes the appropriate CSS rules to target the list.

This markup is the same as the previous exercise's horizontal navigation bar, but with a sublist nested inside each list item. It is vital to nest the list correctlyyou must put the entire nested list, from ul to /ul, inside of a list item, right before the list item's closing /li, as this simple example, with the nested list highlighted, illustrates

<ul>
<li><a href="#">This is a top level item 1, without a drop-down</a></li>
<li><a href="#">This is a top level item 2, with a drop-down</a>
<ul>
<li><a href="#">This is item 1 of the drop-down</a></li>
<li><a href="#">This is item 2 of the drop-down</a>
</ul>
</li> <!--note this is the close of top-level list item 2-->
<li><a href="#">This is a top level item 3, without a drop-down</a></li>
</ul>

href values are simply designated as #a placeholderin this markup. This placeholder does nothing; you need to replace each # with an appropriate URL, either relative or absolute, to point to the relevant page.

Let's start simply. Instead of working immediately with the final markup earlier in this section, start with the horizontal navigation markup, which has a sublist added to only the first li. You will add the other nested lists after you have one menu working correctly. Here's the markup

We need some styles specifically for the drop-down menu to get it to stack under its parent element.

Instead of adding a class or ID to the submenu so we can target it, just write a selector that only affects a list that is within a list. For example, the selector ul li ul {…some CSS here…} only targets a ul element that is contained within the li element of a parent listjust what we want. As you can see in the following code, just three simple CSS declarations get you well on the way to the desired result

If we set the width of the ul of the nested list, and then force the li elements within to be 100 percent of that width, they stack nicely. Without the 100 percent width on the li, the short words, "FAQs" and "Sign Up," would be on the same line, and each li element would be a different length.

The next step is to get drop-downs correctly positioned with respect to the menu. The way to do this is to set the child element's position property to absolute and the parent's to relative. At the same time, we'll want to correctly style the drop-down's borders, so we can see that the drop-down is, in fact, accurately aligned to the menu. Here's the code

The drop-down is 1 pixel off because it aligns with the list item, not the list item's border, but because its positioning context is now its parent element (its position is set to absolute, the parent to relative), it's just a matter of defining a left offset to nudge it into the correct location. Here's what to do

With the exception of some styling problems in Internet Explorer (a missing top line, and the inherited left ul border from an earlier hack) that we will fix later, the drop-down is now nicely styled, and we're ready to make it visible only when the pointer is over the appropriate choice of the menu.

In the horizontal menu, the element that changes is the one that is being hovered over, but in the case of the drop-down menu, that's not true. The drop-down should display when its parent menu (the choice on the horizontal menu) is hovered over. A brilliantly simple selector makes that happen.

Display is inherited, so all the list items within the ul disappear too. With the drop-down hidden, next make it appear when the drop-down's menu choice is hovered, like this

This selector states that the drop-down ul should display when its parent li is hovered over. However, we also want the menu to remain visible when we move off the parent menu choice and onto the drop-down itself. To do so, group a second selector with the display:block declaration like this

Now the menu is displayed is when you hover over either the menu or the drop-down, and your menu springs to life (Figure 7.26).

One thing you'll notice is that the drop-down text doesn't highlight when you are on a drop-down list item, only when you are on the text itself. Let's deal with that next. To deal with this, you might think you would need to set the drop-down links to block, but as it turns out, you have to set the parent (the menu) links to block for all browsers at this point. Here's how it works

So now we can remove the Internet Explorer hack from the horizontal menu exercise that set the menu links to block; it turns out we need that setting for all browsers. You'll delete this line of code

We now have drop-down menus built from basic list markup and without a line of JavaScript in sight.

Creating Drop-Down Menus

Creating Drop-Down Menus

Marking Up Drop-Down Menus

Figure 7.21. Here's your completed drop-down menu.

Figure 7.22. The submenu is not stacked like a drop-down yet, but it is inheriting the styles from the parent list, as shown when you point at a link.

Figure 7.23. Although this menu needs better styling and doesn't yet open and close automatically, it is starting to look like a drop-down menu.

Figure 7.24. With the contextual positioning set, and the borders styled, you can see that the alignment of the drop-down to the menu is almost perfect.

Figure 7.25. Now the drop-down is correctly positioned under the menu.

Figure 7.26. When the menu is hovered over, the drop-down displays. The menu remains highlighted while the user moves on to the drop-down.

Figure 7.27. Now the links highlight when the pointer moves over the list items.