JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <a href="#menu">link1</a></br>
    <a href="#menu">link2</a></br>
    <a href="#menu">link3</a></br>
</div>
<div class="dropdown">
    Menu
</div>

CSS

#menu {
    float:left;
}

.dropdown {
    position: absolute;
    width: 60px;
    height: 100px;
    left:35px;
    background-color: red;
    border: solid black 1px;
}

JavaScript

$(document).ready(function () {
  
    var $menu = $('.dropdown').hide();

    var _expand = function(event){
        $menu.stop(true);
        $menu.fadeIn();
    };
    
    var _collapse = function(event){
           $menu.fadeOut();
        $menu.stop(true);
    };
    
    $menu.hover(_expand, _collapse);
    
    $('#menu a').hover(_expand, _collapse);
});