HTML, XHTML, and CSS All-In-One Desk Reference For Dummies®

Chapter 3. Styling Lists and Menus

In This Chapter

• Using CSS styles with lists

• Building buttons from lists of links

• Dynamically displaying sublists

• Managing vertical and horizontal lists

• Building CSS-based menus

Most pages consist of content and navigation tools. Almost all pages have a list of links somewhere on the page. Navigation menus are lists of links, but lists of links in plain HTML are ugly. There has to be a way to make 'em prettier.

It's remarkably easy to build solid navigation tools with CSS alone (at least, in the modern browsers that support CSS properly). In this chapter, you rescue your lists from the boring 1990s sensibility, turning them into dynamic buttons, horizontal lists, and even dynamically cascading menus.

Revisiting List Styles

XHTML does provide some default list styling, but it's pretty dull. You'll often want to improve the appearance of a list of data. Most site navigation is essentially a list of links. One easy trick is to make your links appear as a set of buttons, as shown in Figure 3-1.

The buttons in Figure 3-1 are pretty nice. They look like buttons, with the familiar three-dimensional look of buttons. They also act like buttons, with each button depressing when the mouse hovers over it. When you click one of these buttons, it acts like a link, taking you to another page.

Figure 3.1. These buttons are actually a list. Note that one button is depressed. ...