.menu {
    position: relative;
    overflow: hidden;
    background: #21B149;
}
.menu a {
    float: left;
    width: 140px;
    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: #9dd681;
    border-bottom: 5px solid #21b149;
    width: 140px;
    bottom: 0;
    left: -140px;
    transition: left .3s;
}

.menu a:nth-child(1):hover ~ span {left: 0}
.menu a:nth-child(2):hover ~ span {left: 140px}
.menu a:nth-child(3):hover ~ span {left: 280px}
.menu a:nth-child(4):hover ~ span {left: 420px}
.menu a:nth-child(5):hover ~ span {left: 560px}
.menu a:nth-child(6):hover ~ span {left: 700px}
.menu a:nth-child(7):hover ~ span {left: 840px}
.menu a:nth-child(8):hover ~ span {left: 980px}
.menu a:nth-child(9):hover ~ span {left: 1120px}
.menu a:nth-child(10):hover ~ span {left: 1260px}

body {
    font-family: Segoe UI, Arial;
}