JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menuHead">
    <li class="title">Menu #1
        <ul class="menu">
            <li>Menu #1 - Link #1</li>
            <li>Menu #1 - Link #2</li>
        </ul>
    </li>
    <li class="title">Menu #2
        <ul class="menu">
            <li>Menu #2 - Link #1</li>
            <li>Menu #2 - Link #2</li>
        </ul>
    </li>
</ul>

CSS

.title {
    width: 150px;
    display: inline-block;
    position: relative;
}
.menu {
    display: none;
}
.open,
.stayOpen {
    position: absolute;
    top: 100%;
    display: block;
    width: 300px;
}

JavaScript

$(document).ready(function () {
    $(".menuHead").on('click mouseenter mouseleave', '> li', function (evt) {
        var e = evt || window.event;
        switch (e.type || e.which) {
            case "click":
                if (!($(this).find('.menu').hasClass('stayOpen'))) {
                    $('.stayOpen').removeClass('stayOpen').hide();
                    $(this).find('.menu').addClass('stayOpen');
                } else {
                    $(this).find('.menu').removeClass('stayOpen').hide();
                }
                break;
            case "mouseenter":
                $(this).find('.menu').not('.stayOpen').addClass('open').show();
                break;
            case "mouseleave":
                $(this).find('.menu').not('.stayOpen').removeClass('open').hide();
                break;
            default:
                break;
        }
    });
});