HTML Utopia: Designing Without Tables Using CSS

11.1. Basic List Styling With CSS

The navigational list menu that appears on the front page of the Footbag Freaks site is created with the following basic HTML:

<ul id="mainnav">
  <li><a href="categories.htm">Category One</a></li>
  <li><a href="categories.htm">Category Two</a></li>
  <li><a href="categories.htm">Category Three</a></li>
  <li><a href="categories.htm">Category Four</a></li>
  <li><a href="categories.htm">Category Five</a></li>
</ul>

Before we apply any CSS rules to this list, it would display as shown in Figure 11-2.

Figure 11-2. Basic Unformatted Link List

About what you'd expect, right? It's a standard unordered list with an unadorned ...