JSFiddle - React, Tailwind, and code Playground

by Leo Wattenberg

HTML

<div id='wrap'>
    <div id="clickable_div">MENU</div>
        <div id="nav_menu">
            <ul>
                <li id="l1">AAAAA</li>
                <li>BBBBB</li>
                <li>CCCCC</li>
                <li>DDDDD</li>
                <li><img src="https://productforums.google.com/forum/image/gdf/1/000000-000000-000000-000000-00000003" /></li>
            </ul>
        </div>
    </div>
</div>

CSS

#clickable_div {width:100px; height:50px; background-color:#9c9c9c;}
*{margin:0; padding:0}
#nav_menu{width:100px; height:auto; background-color:#CCC;display:none;}

#wrap{ width:100px }

JavaScript

$('#clickable_div').mouseover( function(){
    $('#nav_menu').slideDown();
})
$('#wrap').mouseleave( function(){
    $('#nav_menu').slideUp();
});