Cacher is the code snippet organizer for pro developers

http://jsfiddle.net/victor_007/gujrud4y/


HTML:
<nav>
    <ul>
        <li>one</li>
        <li class="active">two</li>
        <li>three</li>
        <li>four</li> 
        <span class="border"></span>
    </ul>
</nav>



CSS3:
nav {
    text-align:center;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
    display:inline-block;
    position:relative;
    font-size:0px;
}
ul li {
    display:inline-block;
    padding:8px 0;
    width:80px;
    text-align:center;
    font-size:15px;
    cursor:pointer;
}
span.border {
    height:2px;
    background:red;
    width:80px;
    position:absolute;
    left:80px;
    bottom:0;
    transition: .5s linear;
}
li:nth-child(1):hover ~ span.border {
    left:0px;
}
li:nth-child(2):hover ~ span.border {
    left:80px;
}
li:nth-child(3):hover ~ span.border {
    left:160px;
}
li:nth-child(4):hover ~ span.border {
    left:240px;
}