JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mnav">
 <ul id="buttons">
  <li class="one"><a href="#">Main 1</a></li>
  <li class="two"><a href="#">Main 2</a></li>
  <li class="three"><a href="#">Main 3</a></li>
  <li class="four nav-dark"><a href="#">Main 4</a></li>
 </ul>
</div> <!-- /mnav -->

<div id="snav">
 <ul class="snav-one">
    <li><a href="#">Sub 1.1</a></li>
    <li><a href="#">Sub 1.2</a></li>
    <li><a href="#">Sub 1.3</a></li>
    <li><a href="#">Sub 1.4</a></li>
    <li><a href="#">Sub 1.5</a></li>
    <li><a href="#">Sub 1.6</a></li>
 </ul>
 <ul class="snav-two">
    <li><a href="#">Sub 2.1</a></li>
    <li><a href="#">Sub 2.2</a></li>
 </ul>
</div> <!-- /snav -->

CSS

li {
    padding: 0.3ex 1em;
    border: 1px solid black;
    margin: 0;
}
#mnav li {
    display: inline-block;
}
#snav ul {
    display: none;
}

JavaScript

$("#buttons li.one, #buttons li.two").hover (
    function () {
        MenuOpenCloseErgoTimer (
            300,
            function (node) {
                var subnav = 'ul.snav-' + $(node).attr ('class');
                $("#snav ul").hide ();
                $("#snav").stop (true, true).slideDown ('fast').addClass ("open").find (subnav).show ();
            },
            this
        );
    },
    function () {
        MenuOpenCloseErgoTimer (
            200,
            function () {
                $("#snav").stop (true, true).slideUp ('fast').removeClass ("open").find ('ul').hide ();
            }
        );
    }
);

$("div#snav ul").hover (
    function () {
        MenuOpenCloseErgoTimer (
            0,
            function () {
                $("#snav").stop (true, true).slideDown ('fast').addClass ("open");
                $(this).show ();
            }
        );
    },
    function () {
        MenuOpenCloseErgoTimer (
            200,
            function () {
                $("#snav").stop (true, true).slideUp ('fast').removeClass ("open");
                $("#snav ul").hide ();
            }
        );
    }
);


function MenuOpenCloseErgoTimer (dDelay, fActionFunction, node)
{
    if (typeof this.delayTimer == "number")
    {
        clearTimeout (this.delayTimer);
        this.delayTimer = '';
    }
    if (node)
        this.delayTimer     = setTimeout (function() { fActionFunction (node); }, dDelay);
    else
        this.delayTimer     = setTimeout (function() { fActionFunction (); }, dDelay);
}