JSFiddle - React, Tailwind, and code Playground

by Rahul Sharma

HTML

<ul id="navigation">
    <li class="navtop">
        <ul class="navunit">
            <li class="navtitle unselectable" unselectable="on">TITLE</li>
            <li class="navcontent">
                <p class="textcontent">CONTENT HERE</li>
        </ul>
    </li>
</ul>

JavaScript

$(document).ready(function () {

    $('li.navtitle').mouseenter(function (e) {
        $(this).next().slideDown();       
        e.stopPropagation();
    });
    $('ul.navunit').mouseleave(function (e) {
        $(this).find('li.navcontent').delay(800).slideUp();
        e.stopPropagation();
    });
});