HTML:
<div class="menu">
<a href="">První</a>
<a href="">Druhý</a>
<a href="">Třetí</a>
<a href="">Čtvrtý</a>
<a href="">Pátý</a>
<a href="">Šestý</a>
<span></span>
</div>
CSS:
.menu {
position: relative;
overflow: hidden;
background: #0D6AB7;
}
.menu a {
float: left;
width: 100px;
text-align: center;
padding: .5em 0 .7em 0;
text-decoration: none;
color: #fff;
z-index: 1;
position: relative;
}
.menu span {
position: absolute;
height: 100%;
background: red;
border-bottom: 5px solid yellow;
width: 100px;
bottom: 0;
left: -100px;
transition: left .2s;
}
.menu a:nth-child(1):hover ~ span {left: 0}
.menu a:nth-child(2):hover ~ span {left: 100px}
.menu a:nth-child(3):hover ~ span {left: 200px}
.menu a:nth-child(4):hover ~ span {left: 300px}
.menu a:nth-child(5):hover ~ span {left: 400px}
.menu a:nth-child(6):hover ~ span {left: 500px}
body {
font-family: Segoe UI, Arial;
}