JSFiddle - React, Tailwind, and code Playground

by Midhun28

HTML

<ul class="nav">
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">About Us</a>
                <ul class="submenu">
                    <li><a href="#">Capabilities</a></li>
                    <li><a href="#">Approach</a></li>
                </ul>
            </li>

            <li><a href="#">Careers</a>
                <ul class="submenu">
                    <li><a href="#">Working With Us</a></li>
                    <li><a href="#">Work Culture</a>
						<ul>
							<li><a href="#">Benefits</a></li>
						</ul>
					</li>
                </ul>
            </li>
            <li><a href="#">Resources</a>
            </li>
                <li><a href="#">Contact Us</a>
            </li>
        </ul>

JavaScript

$('ul.submenu').hide();
$('ul.nav > li').hover(function () {
if ($(this).find('ul.submenu').length > 0) {
    $(this).find('ul.submenu').stop().slideDown('slow');
}
},function () {
	if ($(this).find('ul.submenu').length > 0) {
		$(this).find('ul.submenu').stop().slideUp('slow');
	}
});