JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
    <a href="#">MENU ITEM</a>
</div>

<div class="box">
    THIS IS THE BOX
</div>

CSS

.nav   {background:#888; padding:10px 10px 0 10px;}
.nav a {padding:1px 15px; background:#eee;}

.box   {position:absolute; top:38px; background:#eee; width:200px; height:100px;left:18px;display:none}

JavaScript

$(document).ready(function(){
    
    $(".nav a").hover(
        function(){
            $(".box").show();
        }, function() {
            if (!$(".box").is(":hover")) $(".box").hide();
        }
    );
    
    $(".box").mouseleave(function() {
		$(this).hide();
	});
    
});