JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>menu with submneu
        <div class="submenu">
         hello im the submenu
        </div>
    </li>
    <li>menu with submneu
        <div class="submenu">
         hello im the submenu
        </div>
    </li>
</ul>

CSS

div.submenu {
    display: none;
}

li {
    float: left;
}

JavaScript

var dropdownwithdelay = function( $navigation,submenuClass,delay ){
    $navigation.each(function(){
        var $triggers, $this = $(this);
        
        $triggers = $this.find( "." + submenuClass ).parent("li");
        
        $triggers.hover(function(){
            $(this).find( "." +  submenuClass ).stop(true,true).delay( delay ).fadeIn();    
        },function(){
            $(this).find( "." +  submenuClass ).stop(true,true).delay( delay ).fadeOut();
        });
        
    });
}

dropdownwithdelay( $("ul:eq(0)"), "submenu",30000 )