This vertical navigation scheme is formatted so that:
- The name of the page that the user is on is weight="bold" and color="white".
- The background color of the "current page" is different than the other background colors, indicating the user's present location.
- It is not a live link, since its silly to have a link to the page you are on.
When you hover over the other live links, the background color and, in this example, the font changes color. The color change is of course an option. Click the "Go To Subnav" link to see the sub-navigation treatment. Check it out below.
The markup for the navigation you see above is as follows. To see the markup for the sub-navigation, click the "Go to Subnav" link.
Download Style Sheet
<li id="current"><a>main nav</a></li>
<li><a href="vertsubnav.htm">go to subnav</a></li>
<li><a href="#">main nav 3</a></li>
<li><a href="#">main nav 4</a></li>
<li><a href="#">main nav "n"</a></li>