Horizontal 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>Horizontal 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: 767px;
float: left; /* Contain floated list items */
}
#nav li {
margin: 0;
padding: 0;
float: left;
}
#nav a {
float: left;
width: 127px;
color: #FFF;
text-decoration: none;
line-height: 2.5;
text-align: center;
border-right: 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/">Maps</a></li>
<li id="nav_jou"><a href="/journal/">Journal</a></li>
<li id="nav_his"><a href="/history/">History</a></li>
<li id="nav_ref"><a href="/references/">References</a></li>
<li id="nav_con"><a href="/contact/">Contact</a></li>
</ul>
</body>
</html>
Related examples in the same category