HTML Utopia: Designing Without Tables Using CSS

11.2. Enhancing the Look of the Menu

All of the changes we need to make to the menu's appearance relate to the individual list items and how they display, so we'll modify the CSS rule that is applied to the anchors stored in the list items. This is the rule that begins with the line:

ul#mainnav li a:link, ul#mainnav li a:visited

Right now, that rule deals only with the display, width, and text-decoration properties. To achieve the end result we want, we must change the color scheme of the list as well as its font. We'll also add some padding to the list to give it a less crowded feeling.

Here's what the CSS looks like after we make all the changes we just mentioned:

 ul#mainnav li a:link, ul#mainnav li a:visited { display: block; text-decoration: ...