JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
<div class="menu-item"></div>
<div class="the-dropdown"></div>

CSS

.menu-item {
    width:100px;
    height:100px;
    background-color:red;
}
.the-dropdown {
    position:absolute;
    top:100;
    width:100px;
    height:100px;
    background-color:blue;
    display:none;
}

JavaScript

$('.menu-item , .the-dropdown').hover(
    function(){
               $("div.the-dropdown").delay('500000').show();
              }
    , function(){
              $("div.the-dropdown").delay('1000').hide();
              }
);