JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

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 class="submenu">
							<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, ul.submenu > li').hover(function () {
if ($('> ul.submenu',this).length > 0) {
    $('> ul.submenu',this).stop().slideDown('slow');
}
},function () {
	if ($('> ul.submenu',this).length > 0) {
		$('> ul.submenu',this).stop().slideUp('slow');
	}
});