Simple CSS horizontal nav with fading links

<ul class="nav">
	<li><a href="">Home</a></li>
	<li><a href="">About us</a></li>
	<li><a href="">Products</a></li>
	<li><a href="">Contact us</a></li>
</ul>
.nav {
	list-style: none;
	margin: 0 auto;
}

.nav li {
	float: left;
}

.nav > li a {
	display: block;
	padding: 12px 18px;
	text-decoration: none;
	color: #999;
	border-bottom: 1px solid #eee;
	transition: all ease .5s;
	background: #fff;
}

.nav:hover > li a {
	opacity: .5;
	transition: all ease .5s;
}

.nav > li:hover a {
	opacity: 1;
	color: #000;
	border-color: #000;
}


Related Snippets