JSFiddle - React, Tailwind, and code Playground

HTML

<ul id='main-menu'>
    <li class="mega-sub">
        <a class="lnk-nav" href="#">Nav #1</a>
        <div class="mega-content">
            <nav>
                <ul class="submenu">
                    <li>
                        <a href="#">Submenu #1</a> 
                    </li>
                    <li>
                        <a href="#">Submenu #2</a> 
                    </li>
                    <li>
                        <a href="#">Submenu #3</a> 
                    </li>
                </ul>
            </nav>
        </div>
    </li>

    <li class="mega-sub">
        <a class="lnk-nav" href="#">Nav #2</a>
        <div class="mega-content">
            this is content 2
        </div>
    </li>
    
</ul>

CSS

.mega-sub {
    background: #ccc;
    width: 80px;
    padding: 5px;
    border-bottom: 2px solid #fff;
}
.lnk-nav { display: block; overflow: hidden; }
.mega-content { display: none; position: absolute; left: 80px; top: 0; width: 300px; height: 300px; background: #000; padding: 10px; color: #fff; }
.mega-content a {
    color: #fff;
}

JavaScript

var $jq = jQuery.noConflict();

$jq(document).ready(function () {
    $jq('#main-menu li.mega-sub').live('mouseenter focus active', function (e) {
        e.stopPropagation();
        if (!$jq(this).children('.mega-content').is(":animated")) {
            $jq(this).children('.mega-content').show();
            $jq(this).children('a:first').toggleClass('active');
        }
    });
    
    $jq('#main-menu li.mega-sub').live('mouseleave mouseout blur', function (e) {
        e.stopPropagation();
        if (!$jq(this).children('.mega-content').is(":animated")) {
            $jq(this).children('.mega-content').hide();
            $jq(this).children('a:first').toggleClass('active');
        }
    });
});