JSFiddle - React, Tailwind, and code Playground

by goodfriend

HTML

<ul id="mainmenu">
    <li> Test 1
        <ul>
            <li>
                Test 1 sub 1
            </li>
            <li>
                Test 1 sub 2
            </li>
        </ul>
    </li>
    <li>
        Test 2
    </li>
</ul>

CSS

ul#mainmenu
    {
        list-style-type: none;
    }
    
ul#mainmenu > li
{   
    display: inline-block;
    margin: 0;
    vertical-align: top;    

    width:50px;
}
        
ul#mainmenu > li > ul 
{
    display: none;      
    margin-left:-40px;
    width:200px;
}

ul#mainmenu > li:hover > ul
{
     display: block;
}