JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">MENU
        <div id="sub-menu">
            <ul>
                <li>Men</li>
                <li>Women</li>
                <li>Kids</li>
            </ul>   
            <ul>
                <li>aaaa</li>
                <li>vvvv</li>
                <li>eddd</li>
            </ul>             
        </div>
    </div>

CSS

#menu{
    background: orange;
    width: 100%;
    height: 20px;
    overflow: hidden;    
}
#sub-menu{
    height: 40px;
    background: #000;
    color: #FFF;
    -webkit-box-shadow: inset 0 2px 3px -1px rgba(145, 145, 145, 0.3);
    box-shadow: inset 0 2px 3px -1px rgba(145, 145, 145, 0.3);
}
#sub-menu ul li{
    list-style: none;
    display: inline;
}

JavaScript

(function($){

    $.fn.showMenu = function(options){
        
        var settings = $.extend({
            height  : '40px',
            speed   : '500',
            heightx : '20px'              
        }, options || {});

        
        return this.each(function(){
           var elem = $(this);
           var menu_timer;
            elem.hover(function(){
                $(this).stop().animate({'height' : settings.height}, settings.speed);
                    }, function(){
                      //setTimeout(function(){  
                      $(this).stop().animate({'height' : settings.heightx}, settings.speed);
                            //},500);
                    }); 
        });      
    };
})(jQuery); 

$("#menu").showMenu();