JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<nav>
    <div> <span></span>

        <ul id="main-nav">
            <li><a href="#">Link 1</a>

                <ul>
                    <li><a href="#">Sub Link 1</a>
                    </li>
                    <li><a href="#">Sub Link 2</a>
                    </li>
                    <li><a href="#">Sub Link 3</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Link 2</a>

                <ul>
                    <li><a href="#">Sub Link 1</a>
                    </li>
                    <li><a href="#">Sub Link 2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

CSS

nav ul#main-nav {
    padding-top: 10px;
    padding-left: 82px;
    width: 100px;
    position: relative;
}
nav ul#main-nav li {
    list-style: none;
    background-color: #eee;
}

#main-nav li ul{
    background-color: #ddd;
}
nav ul#main-nav li a, nav ul#main-nav li a:visited {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    text-transform: lowercase;
    padding: 8px 0;
    display: block;
}
nav ul#main-nav li a:hover {
    color: #ff9900;
}
nav ul#main-nav li ul {
    position: absolute;
    top: 0;
    padding: 0;
    margin: 10px 0;
    margin-left: 190px;
    width: 170px;
    display: none;
}
nav ul#main-nav li.active ul {
    display: block;
    min-height: 250px;
}

JavaScript

var $mainlist = $('#main-nav > li');
var $subnav = $('#main-nav li ul');
var active = false;
var timer = null;

$(function () {
    
    $mainlist.hoverIntent(
        
        function () {
            clearTimeout(timer);
            deactivate();
            $(this).addClass('active');
            active = $(this);
        },
        
        function () {
            timer = setTimeout(function () {
                deactivate();
            }, 1000);
            
        });
    
    $subnav.hover(
        function () {
            console.log('entered subnav', active);
            clearTimeout(timer);
        },
        
        function() {
            console.log('deactivating from subnav out', active);
            deactivate();
        });
    
    var deactivate = function() {
        if(active) {
            active.removeClass('active');
        }
        active = false;
    }
});