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.

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

Now, let's create a style rule that removes the bullet, as, in our final menu, we don't want the bullets hanging around. To do that, simply insert the following style rule into the document:

ul#mainnav {
  list-style: none;
}

Including a list-style property with a value of none creates an unordered list with no bullets as shown in Figure 11-3.

Already, the design is closer to what we want. But, the bulleted list is always indented from the left margin by default , and the ultimate design dictates that we have a colored background behind the menu. Let's take care of those two things in the obvious ways, with the new property assignments shown in bold in the following CSS.

ul#mainnav {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #D6D6D6;
}

The result of applying this rule to the list from which the menu is being created is shown in Figure 11-4.

This is getting closer to the final design goal, though we obviously still have some distance to go.

Next, let's deal with the underlining issues in the menu. We want to eliminate the automatic underline placed beneath hyperlinks and add the divider lines between menu items called for by the final design. The hyperlink underlining issue can be addressed by a context rule like this one :

ul#mainnav li a:link, ul#mainnav li a:visited {
  text-decoration: none;
}

We've seen these before. Note that I've confined the rule's context to hyperlinks (both normal and visited) contained within a list item, in an unordered list identified as mainnav.

Adding a dividing line between each entry in the list is just as simple, thanks to the fact that list items are block elements that can have borders :

ul#mainnav li {
  border-top: 1px solid #A5B5C6;
}

This rule applies to all list items in the mainnav unordered list. It just adds a colored, one-pixel border to the top of each list item.

Now, the original bullet list looks like Figure 11-5 and you can begin to see it taking shape as an attractive menu like the one on the front page of our site.

The design specification for the Footbag Freaks site calls for the navigation menus to behave like rollover buttons, changing their color as the user positions the cursor over them. Recall that hyperlink objects have a hover pseudo-class that can be used to declare styles. Just create a style rule like this one:

ul#mainnav li a:hover {
  background-color: #43616B;
  color: #eee;
}

This change dramatically reveals a lingering problem we have ignored until now. Hyperlinks are inline elements by default, so each link in the menu only occupies the area covered by the link text. When you hover your mouse over a link in the menu, you'll see that the colored box only covers the text. In addition to the unattractive visual effect, there is a usability issue to consider as well. To make the menu behave as intended, the user should be able to click anywhere in the rectangle containing one of the links—not necessarily on the link text.

To achieve this, we further modify our links by converting them into block elements with the display property :

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

You can see the result of this change in Figure 11-6.

That's the way it looks in most browsers, anyway. Unfortunately, Internet Explorer for Windows has a bug that adds a margin to the bottom of each list item when you set the display property . To correct this, simply apply a width to the list items:

ul#mainnav li a:link, ul#mainnav li a:visited {
  text-decoration: none;
  display: block;
  width: 100%;
}

This completes the basic modifications that will transform a standard, unordered list into a reasonably professional, interactive, single-level menu. Now, let's take a look at how to spruce it up a bit and give it a more polished appearance.