JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="#">Link One</a>
        <div class="subitem">I am a sub item ONE</div>    
    </li>
    <li>
        <a href="#">Link Two</a>
        <div class="subitem">I am a sub item TWO</div>    
    </li>
    <li>
        <a href="#">Link Three</a>
        <div class="subitem">I am a sub item THREE</div>    
    </li>
    <li>
        <a href="#">Link Four</a>
        <div class="subitem">I am a sub item FOUR</div>    
    </li>
</ul>

CSS

ul {
    background: #111;
    height: 30px;
    width: 400px;
}

ul li {
    float: left;
    height: 30px;  
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    width: 100px;
}

ul li .subitem {
   background: #ddd;
    display: none;
    height: 300px;
    left: 0;
    position: absolute;
    top: 30px;
    width: 100px;  
}

ul li a {
    color: #fff;   
}

ul li:hover {
    background: #333;   
}

JavaScript

var duration = 300;

$('ul').hover(function(){
    duration = 0;
}, function(){
    duration = 300;    
});

$('li').hover(function(){
    $(this).find('.subitem').stop(false, true).slideDown(duration);
}, function(){
    $this = $(this);
    setTimeout(function(){
        $this.find('.subitem').stop(false, true).slideUp(duration);
    }, 10);
});