Vertical Navigation Bar

Here is an example of a fully styled vertical navigation bar:

HTML file: Displayed by browser:
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
a:link, a:visited {
   display: block;
   font-weight: bold;
   color: #004000;
   background-color: #ffff80;
   width: 120px;
   text-align: center;
   padding: 4px;
   text-decoration: none;
   text-transform: uppercase;
}
a:hover, a:active {
   background-color: #ffff00;
}
</style>
<body>
<br />
<ul>
  <li><a href="#">Home</a></li><br />
  <li><a href="#">News</a></li><br />
  <li><a href="#">Contact</a></li><br />
  <li><a href="#">About</a></li>
</ul>
</body>

The <a> selector has been split into two groups on the stylesheet (link, visited and hover, active). The link's default underline has been removed (no text-decoration).

Back button Table of Contents Next button