Document
nav {
margin: 50px auto 0;
width: 624px;
height: 60px;
padding: 5px 0;
overflow: hidden;
background-color: #a1a1a1;
border-radius: 2em;
}
ul {
padding: 13.5px 0;
margin: 0;
z-index: 2;
position: absolute;
height: 33px;
overflow: hidden;
display: table;
}
li {
display: inline-block;
width: 156px;
height: 27px;
}
a {
margin: 0 auto;
text-decoration: none;
display: inline-block;
float: left;
width: 100%;
text-align: center;
font-size: 24px;
font-weight: bold;
color: rgba(0, 0, 0, 0.5);
}
.low-bar{
z-index: 1;
width: 156px;
height: 120px;
background-color: rgba(0, 0, 0, 0.5);
position: relative;
margin-left:-156px;
top: -10px;
}
</style>
<nav>
<ul class="nav-bar">
<li><a href="#">home</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">contact</a></li>
</ul>
<div class="low-bar"></div>
</nav>
$("li a").hover(function(){
var currentPosition = $(this).position().left;
$('.low-bar').animate({
left: (currentPosition+$("li a").width())+"px"
},"slow");
},function(){
//do something else
});
