JSFiddle - React, Tailwind, and code Playground

by dqisv

HTML

<nav>
    <ul id="mainnav">
        <li><a href="#">a thing</a></li>
        <li><a href="#">some stuff</a>
            <ul class="subnav">
                <li><a href="###">dropdown1</a></li>
                <li><a href="#">dropdown2</a></li>
                <li><a href="###">dropdown1</a></li>
                <li><a href="###">dropdown2</a></li>
                <li><a href="#">dropdown1</a></li>
                <li><a href="###">dropdown2</a></li>
            </ul>
        </li>           
    </ul>
</nav>

CSS

#mainnav {
    display: block;
    line-height: 16px; 
    background-color: yellow;
}
.subnav {
    display: none;
}
.subnav-show {
    display: block;
}

JavaScript

$(document).ready(function () {    
    $('#mainnav li').hover(
        function () {
             $('ul', this).addClass('subnav-show').delay(2000).queue(function(){
                $(this).removeClass('subnav-show').dequeue();
            });               
        });
});