Easy Vertical Navigational List
Let's say this is our HTML structure:
<ul id="nav"> <li><a href="#" class="active">Example one</a></li> <li><a href="#">Example two</a></li> <li><a href="#">Example three</a></li> <li><a href="#">Example four</a></li> <li><a href="#">Example five</a></li> </ul>
And let's say this is our CSS:
#nav li{display:inline;}
#nav{
width:8em;
font-family:sans-serif;
margin:0 0 0 3em;
padding:0;
border-top:1px #000 solid;
border-left:1px #000 solid;
border-right:1px #000 solid;
}
#nav a,#nav a:visited{
width:99.99%;
display:block;
background-color:#fff;
border-bottom:1px #000 solid;
text-align:center;
text-decoration:none;
color:#000;
}
#nav a:hover,#nav a.active{color:#fff;background-color:#999;}