JSFiddle - React, Tailwind, and code Playground

by Bhupesh Kushwaha

HTML

<nav>
    <ul class="thisul">
        <li>
            <a class="menu">Category A</a>
            <ul class="submenu">
                <li><a href="#">Item A</a></li>
                <li><a href="#">Item B</a></li>
            </ul>
        </li>
        <li>
            <a class="menu">Category B</a>
            <ul class="submenu">
                <li><a href="#">Item C</a></li>
                <li><a href="#">Item D</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

nav {
    width: 760px;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    float: left;
}
nav ul li a {
    float: left;
    cursor: pointer;
    padding: 8px 15px;
}

nav ul li ul {
    display: none;
}

JavaScript

/*$(".menu").on('click', function() {
    var submenu = $(this).next('.submenu');
    if($('.thisul').find('.submenu') != $(this)){
        $('.thisul').find('.submenu').fadeOut();
    }
    submenu.fadeToggle();
});
*/

$('.thisul li').click(function() {
		
		$(this).children('ul').stop(true, true, false).fadeToggle(300);
});