Navigation bar with selected item
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
/***** Navigation *****/
#navigation ul,#navigation li
{
margin:0;
padding:0;
}
#navigation
{
background:#71A70B;
color:#fff;
font-size:1em;
height:2em;
line-height:2em;
}
#navigation li
{
float:left;
list-style:none;
white-space:nowrap;
}
#navigation li a
{
background:inherit;
color:#fff;
display:block;
font-weight:bold;
padding:0 15px;
text-decoration:none;
text-transform:uppercase;
}
* html #navigation a {width:1%;}
#navigation .selected,#navigation a:hover
{
background:#81C00C;
color:#fff;
text-decoration:none;
}
</style>
<title></title>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">This</a></li>
<li><a href="#" class="selected">Could</a></li>
<li><a href="#">Be</a></li>
<li><a href="#">A</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div>
</body>
</html>
Related examples in the same category