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: none;
  width: 88%;
  padding: 6px 6%;
  background-color: #5C6F90;
  font: bold 10pt/1.5 arial, sans-serif;
  color: #fff;
}

The padding value will produce a nicely spaced layout for the menu. Note that we've reduced the width to 88% to make room for the 6% padding we've added to either side of the link. The font property adds further space to the design by placing a 10 point font on a 15 point line (1.5 times the usual line height).

The result of these changes is reflected in Figure 11-7. Other than the font and spacing, it doesn't look so different from Figure 11-6, when it's displayed in black and white.

Figure 11-7. Font, Coloring and Spacing Added to Menu List

Now, we have a list of links converted into an attractive, interactive menu that works predictably and reliably across platforms and browsers.