Stuarts Tools

css navigation

navigation bars, both vertical and horizontal.

here's what it looks like, the nav from this very site!

link one
link two
link three
link four
link five

html

<ul id="navigation">
	<li><a href="#1">link one</a></li>
	<li><a href="#2">link two</a></li>
	<li><a href="#3">link three</a></li>
	<li><a href="#4">link four</a></li>
	<li><a href="#5">link five</a></li>
</ul>

css

#navigation
{
width:500px;
margin:0;
padding:0;
list-style-type:none;
}
#navigation li
{
border-right:1px solid #2B3536;
display:inline;
margin:0;
padding:0 0.5em 0 0.5em;
}
#navigation li.last
{
border-right:0;
}
#navigation li a:link,
#navigation li a:visited
{
color:#fff;
text-decoration:none;
padding:0 0 0.25em 0;
}
#navigation li a:hover
{
border-bottom:1px solid #1d7cd0;
}