JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

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>
    <!-- Some more navtop/navunits... -->
</ul>

JavaScript

$(document).ready(function () {
    var slideOptions = {
        duration: 500,
        easing: 'linear'
    };
   var timer = null;
    $('li.navtitle').mouseenter(function () {
        $(this).next().slideDown("fast");
    });
    $('ul.navunit').mouseleave(function () {
        $(this).find('li.navcontent').slideUp("slow");
    });
});