<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;
}
