Seth Keiper

Archive for April, 2007

Easy Vertical Navigational List

by on Apr.20, 2007, under CSS

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 Comment more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!