JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<ul id="nav">
    <li class="level0 nav-1 first level-top parent">
        <a href="#" class="level-top"><span>level1a</span></a>
            <ul class="level0">
                <li class="level1 nav-1-1 first">
                    <a href="#"><span>level1b</span></a></li>
                <li class="level1 nav-1-2"><a href="#"><span>level1c</span></a></li>
                <li class="level1 nav-1-3"><a href="#"><span>level1d</span></a></li>
                </li>
            </ul>
    </li>
    <li class="level0 nav-2 level-top"><a href="#" class="level-top"><span>level2a</span></a></li>
    <li class="level0 nav-3 level-top"><a href="#" class="level-top"><span>level2b</span></a></li>
    <li class="level0 nav-4 level-top"><a href="#" class="level-top"><span>level2c</span></a></li>
    <li class="level0 nav-5 level-top"><a href="#" class="level-top"><span>level2d</span></a></li>
</ul>

CSS

.main-menu ul li ul{display: none;}
.main-menu ul li:hover ul{
display:block;
    
}