CSS. Vertical navigation bar.

In exemplul de mai jos o sa demonstrez cum se poate de creat un meniu vertical utilizind doar CSS. Este un exemplu foarte util si destul de simplu dar care pentru un machetator simplifica mult lucrul. Deci exemplul:
Codul HTML
<ul class="nav">
            <li><a href="">Home</a></li>
            <li><a href="">About Us</a></li>
            <li><a href="">Who Is</a></li>
            <li><a href="">We are</a></li>
            <li><a href="">Contacts</a></li>
            <li><a href="">Last Option</a></li>
        </ul>
Codul CSS
ul.nav{
    margin:0;
    padding:0;
    list-style-type: none;
    width:8em;
    background-color:#8bd400;
    border:solid 1px #486B02;
}
ul.nav a{
    display:block;
    color:#2b3f00;
    text-decoration:none;
    border-top:solid 1px #E4ffd3;
    border-bottom:solid 1px #486B02;
    padding:0.3em 1em;
}
ul.nav a:hover,
ul.nav a:focus
ul.nav .selected a{
    color:#e4ffd3;
    background-color:#6da203;
}

In rezultat avem un meniu vertical foarte simpatic folosind doar CSS si o lista HTML, l-am testat pentru versiunile de IE7, Firefox, Chrome, merge. Enjoy :)