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

Get HTML Utopia: Designing Without Tables Using CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.