11.3. Creating a Submenu within the Main Menu

Many sites don't need any more than one level of menu-based navigation. But, sites that have any amount of complexity can probably benefit from at least two-level menus at strategic points, if not throughout the site. In many ways, creating a submenu within the main menu is not so different from creating the main menu.

Figure 11-8 shows a secondary page on the Footbag Freaks site, where the main menu has been opened up to reveal a submenu by which we can navigate subcategories.

Notice the submenu embedded in the main menu offers the user four choices. The HTML that creates the menu with submenus looks like this:

<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>
    <ul class="subnav">
      <li><a href="subcats.htm">Sub Category One</a></li>
      <li><a href="subcats.htm">Sub Category Two</a></li>
      <li><a href="subcats.htm">Sub Category Three</a></li>
      <li><a href="subcats.htm">Sub Category Four</a></li>
    </ul>
  </li>
  <li><a href="categories.htm">Category Four</a></li>
  <li><a href="categories.htm">Category Five</a></li>
</ul>

There's nothing new or mysterious here.

In fact, there's nothing new or mysterious in the CSS that's applied to these newly inserted list elements, either. Note that they belong to class subnav, so the CSS rules you create to control their appearance will also have that identifier.

Here's the basic CSS rule for the sub-navigation list itself.

ul#mainnav ul.subnav {
  list-style: none;
  margin: 0;
  padding: 0;
}

The rule selector—ul#mainnav ul.subnav—is perhaps unnecessarily complex. If we establish by policy the notion that we will use only the class subnav for lists that are contained in the mainnav or similar menu lists, we could shorten this considerably to ul.subnav or even just .subnav. But, this selector convention has one advantage over the terser choices: it is readable and its scope and use are readily apparent.

The following CSS rule applies to list items in the subnav class of lists:

ul#mainnav ul.subnav li {
  border-top: 0 none;
  padding-left: 1.5em;
}

The border-top property removes the one-pixel border we added to all list item elements within the mainnav list, and separates our main menu items. We don't want separator lines between our submenu items, so we set that border to zero in this case. As the selector for this rule is more specific than the selector for all list items within mainnav (ul#mainnav li), it takes precedence.

By using a padding-left setting, we force the submenu to be indented from the left side of the main menu, which makes it easier for the user to spot the menu as something different from the main menu list.

Styling the appearance of the links in the submenu doesn't involve anything particularly new or exciting either:

ul#mainnav ul.subnav li a:link, ul#mainnav ul.subnav li a:visited
{
  padding: 1px;
  font: bold 0.7em /1.5 verdana, sans-serif;
  color: #5C6F90;
  background-color: transparent;
}

Compared to the equivalent rule for the main navigation list, you can see that we use less padding, a smaller font and a transparent background color. Otherwise, it's quite similar.

Finally, when the user places the cursor over one of these sub-navigation menu links, we want the link to become underlined. So, we define a CSS rule for the a:hover pseudo-class as follows:

ul#mainnav ul.subnav li a:hover {
  color: #43616B;
  background-color: transparent;
  text-decoration: underline;
}