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;
}
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');

$(function () {
    
    $mainlist.hoverIntent(
        
        function () {
            $(this).addClass('active');
        },
        
        function () {
            if ($('main-nav li').hover() && $('main-nav li').not($(this))) {
                $(this).removeClass('active');
            } else if ($('#main-nav').add($subnav).mouseleave()) {
                timer = setTimeout(function () {
                    $('#main-nav').find('li.active').removeClass('active');
                }, 1000);
            }
        });
    
    $subnav.hover(
        
        function () {
            clearTimeout(timer);
        },
        
        function () {
            //
        });
});