JSFiddle - React, Tailwind, and code Playground

by fordlover49

HTML

<ul id="hover_menu_list" onmouseout="document.getElementById('menu1').style.display='none';" onmouseover="document.getElementById('menu1').style.display='block';">
    <li>
        Menu
        <ul id="menu1">
            <li>Submenu1</li>
            <li>Submenu2</li>
        </ul>
    </li>
</ul>

CSS

ul, li                      {padding:0; margin:0; border:0;}
ul#hover_menu_list, 
ul#hover_menu_list ul       {list-style-type:none;}
ul#hover_menu_list li       {float:left;position:relative;display:inline;}
ul#hover_menu_list li ul    {border:1px solid #000; display:none;position:absolute;left:0px;top:20px;width:170px;}
ul#hover_menu_list li ul li {display:block; clear:left; float:left;width:140px;}