JSFiddle - React, Tailwind, and code Playground

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>
            </ul>
        </div>
    </div>
</div>

CSS

c

JavaScript

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