JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul id="mainnav">
        <li><a href="#">a thing</a></li>
        <li><a href="#">some stuff</a>
            <ul>
                <li><a href="###">dropdown1</a></li>
                <li><a href="###">dropdown2</a></li>
            </ul>
        </li>           
    </ul>
</nav>

CSS

#mainnav li{
    background: #eee; 
}
#mainnav li ul li{
    background: none; 
}
#mainnav li:hover{
   background: yellow;
}
#mainnav li:hover ul{
    height: 100px;
    transition-delay: 0s;
     transition-duration: 1s;
}
#mainnav li ul{
    overflow: hidden;
    height: 0px;
    transition-delay: 10s;
    transition-duration: 2s;
}