JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
<li>menu1
<ul>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
</ul>
</li>
<li>menu2
<ul>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
</ul>
</li>
<li>menu3
<ul>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
<li>podmenu</li>
</ul>
<ul>

CSS

.menu>li{
    display:inline-block;
    width:120px;
    top:0;
    background:yellow;
    z-index:9;
}
.menu>li>ul {
    position:absolute;
    display:block;
    top:-200px;
    transition: top .4s ease 0s;	
    background:green;
    width:80px;
    z-index:-1;
}
.menu>li:hover>ul {
    top:30px;
}