SOURCE

<div class="wrapper">
    <ul class="nav">
        <li class="l1"><a href="/">首页</a></li>
        <li class="l2"><a href="##">服务</a></li>
        <li class="l3"><a href="##">项目</a></li>
        <li class="l4"><a href="##">产品</a></li>
        <li class="l5"><a href="##">关于</a></li>
        <li class="l6"><a href="##">联系</a></li>
        <div class="abs"></div>
    </ul>
</div>

/*css reset */
*{margin: 0; padding: 0; } 
body {font: 16px Microsoft YaHei,Arial,Helvetica; }
a {text-decoration: none; } 
li {list-style: none; } 


.wrapper {
    width: 800px;
    margin: 0 auto;
} 
.d1 {
    width: 100px;
    height: 100px;
    border-radius: 55%;
    background: #08c;
}   
.nav {
    width: 600px;
    margin: 50px auto;
    font-size: 0;
    position: relative;
    overflow: hidden;
}
.nav li {
    display: inline-block;
    width: 100px;
    height: 70px;
    background: #eee;
    text-align: center;
}
.nav li a {
    font: 16px/70px Microsoft YaHei,Arial;
    color: #0ae;
    display: block;
    width: 100%;

}
.abs {
    width: 100px;
    height: 4px;
    background: #0ae;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: .2s;
}
.nav .l1:hover~.abs {
    left: 0;
}
.nav .l2:hover~.abs {
    left: 100px;
}
.nav .l3:hover~.abs {
    left: 200px;
}
.nav .l4:hover~.abs {
    left: 300px;
}
.nav .l5:hover~.abs {
    left: 400px;
}
.nav .l6:hover~.abs {
    left: 500px;
}