index.css

 nav {
     position: relative;
     margin: 270px auto 0;
     width: 590px;
     height: 50px;
     background-color: black;
     border-radius: 8px;
     font-size:0 ;
 }

 nav a {
     font-size: 15px;
     text-decoration: none;
     text-transform: uppercase;
     color: white;
     display: inline-block;
     text-align: center;
     line-height: 50px;
     position: relative;
     z-index: 1;
 }

 nav .animation {
     position: absolute;
     height: 100%;
     top: 0;
     z-index: 0;
     background-color: green;
     border-radius: 8px;
     transition: all .5s ease 0s;
 }

 nav a:nth-child(1){
    width: 100px;
 }

 nav .start-home , a:nth-child(1):hover~.animation{
    width: 100px;
    left: 0;
 }

 nav a:nth-child(2){
    width: 110px;
 }

 nav a:nth-child(2):hover~.animation{
    width: 110px;
    left: 100px;
 }

 nav a:nth-child(3){
    width: 100px;
 }

 nav a:nth-child(3):hover~.animation{
    width: 100px;
    left: 210px;
 }

 nav a:nth-child(4){
    width: 160px;
 }

 nav a:nth-child(4):hover~.animation{
    width: 160px;
    left: 310px;
 }

 nav a:nth-child(5){
    width: 120px;
 }

 nav a:nth-child(5):hover~.animation{
    width: 120px;
    left: 470px;
 }