JSFiddle - React, Tailwind, and code Playground

HTML

<div id='menu-link'>A menu link</div>

<div id='options'>
    <ul>
        <li>Option A</li>
        <li>Option B</li>
        <li>Option C</li>
    </ul>
</div>

CSS

#menu-link {
 background: #333;
 color: #fff;  
 width: 100px;
 padding: 5px;    
}

#options {
 display: none;
 color: yellow;
 background: #333;
 width: 200px;
 font-size: 12px;
 padding: 5px;
}

JavaScript

$(document).ready(function() {
    
    $('#menu-link').hover(function() {
        $('#options').slideDown()
    }, function() {
        // Perhaps only do this if mouse is NOT on top of #options?
        $('#options').slideUp() 
    });
    
});