JSFiddle - React, Tailwind, and code Playground

HTML

<li>Menu
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</li>

CSS

li {
    position:relative;
    border:thin solid grey;
    display:inline-block;
}
ul {
    position:absolute;
    display:none;
    border:thin solid grey;
    padding-left:0px;
    left:0px;
    top:10px;
}

JavaScript

function show(ul) {
    ul.css("display", "inline-block");
}

function hide(ul) {
    ul.css("display", "none");
}

$("li").mouseover(function () {
    var ul = $(this).children("ul");
    var timer = setTimeout(function () {
        show(ul);
    }, 400);
    $(this).data("timer", timer);

}).mouseout(function () {
    var ul = $(this).children("ul");
    var timer = $(this).data("timer");
    clearTimeout(timer);
    hide(ul);
});