JSFiddle - React, Tailwind, and code Playground

by Tushar Gupta

HTML

<h1>The HTML</h1>

<ul class="root">
    <li>Menu1
        <ul class="submenu">
            <li>Menu11</li>
            <li>Menu12</li>
        </ul>
    </li>
    <li>Menu2
        <ul class="submenu">
            <li>Menu21</li>
            <li>Menu22</li>
        </ul>
    </li>
</ul>

CSS

.root li {
    display: inline-block;
    background: #eee;
    color: #333;
    position: relative;
    padding: 10px 20px;
    font-size: 14px;
    line-height: 30px;
    height: 30px
}
.root {
    float: left
}
.root li:hover {
    background: #333;
    color: #fff
}
.submenu li {
    display: block;
    clear: both
}
.root li ul {
    display: none;
    position: absolute;
    top: 45px;
    left: -40px
}
.root li ul.open {
    display: block
}

JavaScript

x='';
y='';
$('.root li').mouseenter(function (e1) {
    var thisItem = $(this);
    clearTimeout(x);

    y = setTimeout(function (e1) {

        if ($(thisItem).children().hasClass('open')) {
            return;
        } else {
            $(thisItem).children().addClass('open');
            $(thisItem).siblings().children().removeClass('open');
        }

    }, 200);

}).mouseleave(function (e2) {
    var thisItem = $(this);
    clearTimeout(y);
    x = setTimeout(function (e2) {
        if (!$(thisItem).children().hasClass('open')) {
            return;
        } else {
            $(thisItem).children().removeClass('open');
        }
    }, 500);
});