JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<ul class="nav">
	<li class="toggle-menu-parent">
 		<a href="#" class="toggle-menu"><span></span>MENU 1</a>
		<ul class="menu1">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
		</ul>
	</li>
	<li class="toggle-menu-parent">
		<a href="#" class="toggle-menu"><span></span>MENU 2</a>
		<ul class="menu2">
			<li><a href="">Item 1</a></li>
			<li><a href="">Item 2</a></li>
		</ul>
	</li>
</ul>

CSS

.nav > li { 
    float:left; 
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}
.nav li ul { 
    display:none; 
    list-style:none;
}
a { 
    display:block; 
    text-decoration:none; 
    padding:5px; 
    background:grey; 
    color:black; 
}
.toggle-menu { 
    background-color:black; 
    color:white; 
}
.active { 
    background:blue;  
}

JavaScript

$('.toggle-menu-parent').on('hover', function(e){    
		e.preventDefault();
    
		$(this).siblings().children('.toggle-menu').removeClass('active').next().slideUp();
    
		$(this).find('.toggle-menu').toggleClass('active').next().slideToggle();

	e.stopPropagation();
});