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;}

Leave a Reply

You must be logged in to post a comment.