O'Reilly logo

HTML, XHTML, & CSS All-in-One For Dummies®, 2nd Edition by Andy Harris

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 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.

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

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

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.

Defining ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required