menu hover effect

 <main class="content">

       <ul>
          <li>
            <span>home</span>
            <span>home</span>
          </li>
          <li>
            <span>service</span>
            <span>service</span>
          </li>
          <li>
<span>contact</span>
<span>contact</span>
          </li>
          <li>
            <span>about</span>
            <span>about</span>

          </li>
          <li>  
            <span>team</span>
            <span>team</span>
        </li>
         
       </ul>


    </main>

*,*::before,*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
}

.content{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
   
}

ul{
position: relative;
list-style-type: none;
display: flex;

}

ul li{
    position: relative;
    text-transform:capitalize;
    font-size: 2em;
    text-align: center;
  font-family: verdana;
  font-weight: bold;
 height: 50px;
  display: block;
  overflow: hidden;
  color: black;
  margin: 0 10px;
 }


 ul li span{
    width: 100%;
    height: 100%;
    display: block;
 }

ul li span:nth-child(1){
    color: blue;
}

ul li span:nth-child(2){
    color:purple;
}

ul li:hover span:nth-child(1){
    transform: translateY(-100%);
}