Vertical Navigation
<!DOCTYPE html PUBLIC "-//W3C//dtD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/dtD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertical Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
html {
font: small/1.4 "Lucida Grande", Tahoma, sans-serif;
}
body {
font-size: 92%;
}
#nav {
margin: 0;
padding: 0;
background: #6F6146;
list-style-type: none;
width: 180px;
float: left; /* Contain floated list items */
}
#nav li {
margin: 0;
padding: 0;
float: left; /* This corrects the */
width: 100%; /* IE whitespace bug */
}
#nav a {
display: block;
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5;
border-bottom: 1px solid #FFF;
}
#nav #nav_con a {
border: none;
}
#nav a:hover {
background: #4F4532;
}
#body_hom #nav_hom a,
#body_map #nav_map a,#body_jou #nav_jou a,
#body_his #nav_his a,#body_ref #nav_ref a,
#body_con #nav_con a {
background: #BEB06F;
color: #1A1303;
font-weight: bold;
}
</style>
</head>
<body id="body_his">
<ul id="nav">
<li id="nav_hom"><a href="/">Home</a></li>
<li id="nav_map"><a href="/">Maps</a></li>
<li id="nav_jou"><a href="/">Journal</a></li>
<li id="nav_his"><a href="/">History</a></li>
<li id="nav_ref"><a href="/">References</a></li>
<li id="nav_con"><a href="/">Contact</a></li>
</ul>
</body>
</html>
Related examples in the same category