CSS Yellow Menu

---

HTML CODE:

 <ul>
            <li>
                <a href="#">home
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </a>
            </li>
            <li><a href="#">about
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </a>
            </li>
            <li><a href="#">services
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </a>
            </li>
            <li><a href="#">portfolio
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </a>
            </li>
            <li><a href="#">contact
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </a>
            </li>
        </ul>

---

CSS MENU:

body{
  margin:0;
  padding:0;
  font-family:sans-serif;
  background-color:#ffff61;
}
ul{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  display:flex;
}
ul li{
  position:relative;
  list-style:none;
}
ul li a{
  position:relative;
  width:120px;
  height:40px;
  display:block;
  text-transform:uppercase;
  text-decoration:none;
  color:#262626;
  text-align:center;
  line-height:40px;
  box-sizing:border-box;
  transition:.5s;
}
ul li a:hover{
    color: #fff;
    transform-origin: bottom;
}
ul li a span{
  position:absolute;
  background:#000;
  width:25%;
  height:100%;
  transform-origin:top;
  transform:scaleY(0);
  transition:transform .5s;
  z-index:-1;
}
ul li a:hover span{
  transform:scaleY(1);
  transform-origin:bottom
}
ul li a span:nth-child(1){
  transition-delay:.0s;
  left:0;
}
ul li a span:nth-child(2){
  transition-delay:.15s;
  left:25%;
}
ul li a span:nth-child(3){
  transition-delay:.30s;
  left:50%;
}
ul li a span:nth-child(4){
  transition-delay:.45s;
  left:75%;
}