JSFiddle - React, Tailwind, and code Playground

HTML

<div class="links">
  <menu>
     <li>
         <a href="#">link 1</a>
     </li>
     <li>
         <a href="#">link 2</a>
     </li>
     <li class="l3">
         <a href="#">link 3</a>
         <menu class="extralinks">
             <li>
                 <a href="#">link 4</a>
             </li>
             <li>
                 <a href="#">link 5</a>
             </li>
         </menu>
     </li>
  </menu>
</div>

CSS

* {
    padding:0;
    margin:0;
}
.links {
    width:100%;
}
.links > menu {
    width:100%;
    text-align:center;
}

.links menu li  {
    display: inline-block;
    position:relative;
    padding:0.75em 1em;
}
.l3 .extralinks {
    position:absolute;
    top:2em;
    left:200%;
    z-index: 4;
    
    -webkit-transition:all 1s ease-in-out 0s;
    -moz-transition:all 1s ease-in-out 0s;
    -o-transition:all 1s ease-in-out 0s;
    -ms-transition:all 1s ease-in-out 0s;
    transition:all 1s ease-in-out 0s;
}
.l3:hover .extralinks {
    left:0%;    
}
.l3:hover .extralinks li {
    display:block;
    transition:2s;
}
.links li:nth-child(3) {
    background-color: Red;
}