www.tuljo.com

Navbar :: navigation bar

Checked with FF, IE6, IE7 and Chrome - all looks the same.

Navbar sampe

Navbar HTML

<div class="navbar">
	<ul>
		<li class="first"><a href="#">Nav One</a></li>
		<li><a href="#">Nav Two</a></li>
		<li><a href="#">Nav Three</a></li>
		<li class="current"><a href="#">Nav Four</a></li>
		<li><a href="#">Nav Five</a></li>
		<li><a href="#">Nav Six</a></li>
	</ul>
</div>

Navbar CSS

.navbar{
	float:left;
	width:100%;
}
.navbar ul{
	float:left;
	list-style:none; /*neutralizes native behaviour of li*/
	padding-bottom:0; /*neutralizes native behaviour of li*/
	padding-left:0; /*neutralizes native behaviour of li*/
	width:auto;
}
.navbar li{
	border-left:1px solid #666;
	float:left;
	width:auto;
}
.navbar .first{
	border-left: none;
}
.navbar li a{
	display:block;
	padding:6px 10px 8px 10px;
	color:#333;
	text-decoration:none;
}
.navbar li a:hover{ /*to disable hover effect for .current, remove the li from here*/
	background-color:#eee;
}
.navbar .current a{
	background:#ccc;
}

2010

Web Development - XHTML CSS JavaScript jQuery.