JSFiddle - React, Tailwind, and code Playground

HTML

<button id="test">Hover Me</button>
<ul class="tester" id="menus">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 1</a></li>
</ul>

CSS

#test {
    border:1px solid blue;
    padding:10px;
}

#menus { 
    display:none;
    border:1px solid blue;
    padding:10px;
    left: 2px;
    position: relative;
    width: 67px;
    margin-top:-3px;
}

JavaScript

$("#test").on('hover',function() {
  $("#menus").show();
}).on('mouseleave', function(e) {
  if(e.relatedTarget.id != 'menus') $('#menus').hide();    
});

$('#menus').on('mouseleave', function(e) {
  if(e.relatedTarget.id != 'test') $(this).hide();
});