CSS Webdesign - Navigation Links Vertikal mit Listen und CSS

Navigationsleiste mit CSS vertikal

Hier ein Beispiel für eine Navigationsleiste, auf der linken Seite, welche mittels CSS gestaltet wurde.

Hier sehen Sie den Quelltext für die linke Navigationsleiste:
<div id="sidemenu">
<ul>
  <li><a href="#">Design Magics</a></li>
  <li><a href="#">Webdesign</a></li>
  <li><a href="#">CSS Sylesheets</a></li>
  <li><a href="#">3D Grafik Design</a></li>
  <li><a href="#">Animationen</a></li>
  <li><a href="#">Drucksachen</a></li>
  <li><a href="#">Podcasts</a></li>
</ul>
</div>
<!-- Ende sidemenu -->
Es wurde ein DIV Bereich angelegt mit der ID sidemenu. Die Navigation wird nun mit CSS vom Design her so gestaltet:

Zunächst wurden für den Body die notwendigen Angaben der Reihenfolge nach zur Schriftart, Schriftgröße, etc. gemacht:
body {font-family: arial; font-size: .8em; color: black; background-color: white; margin-top: 1.58em;
margin-left: 16%;}

Hier wird nun die Breite, der linke Abstand, Randfarbe angegeben:
#sidemenu {width: 180px; margin: 2px; padding: 0; border: 1px solid silver;}

Die generelle Formatierung des Elements ul erfolgt danach:
#sidemenu ul {list-style: none; margin: 1px; padding: 0;}

Die Formatierung des Elements li:
#sidemenu li {margin: 0; padding: 0; list-style-type: none; display: block; border-bottom: 1px solid white; color: white; background-color: #6699cc; }

Wie soll der Bereich gestaltet sein, wenn aktive Links enthalten sind?
#sidemenu li a {text-decoration: none; padding: 2px 3px; display: block; color: white; background-color: transparent;}

Und zuletzt gestalten wir noch den Hover-Effekt, d.h. wenn wir mit der Maus über einen Link fahren:
#sidemenu a:hover {color: white; background-color: black;}