JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<ul id="main-menu">
		<li class="main-tabs"><span>Home</span>
			<ul id="sub-menu">
				<li class="sub-tabs"><span>Sub-Menu Tabs</span>
					<ul id="drop-menu">
						<li class="drop-tabs"><span>Drop Menu Tabs</span>
							<ul id="slide-menu">
								<li class="slide-tabs"><span>Slide Menu Tabs</span></li>
								<li class="slide-tabs"><span>Slide Menu Tabs</span></li>
								<li class="slide-tabs"><span>Slide Menu Tabs</span></li>
								<li class="slide-tabs"><span>Slide Menu Tabs</span></li>
								<li class="slide-tabs"><span>Slide Menu Tabs</span></li>
							</ul> <!-- End Slide Menu -->
						</li> <!-- End Drop Tab -->
					</ul> <!-- End Drop Menu -->
				</li> <!-- End Sub Tabs -->
			</ul> <!-- End Sub Menu -->
		</li> <!-- End Main Tabs -->
	</ul> <!-- End Main Menu -->

CSS

#sub-menu, #drop-menu, #slide-menu {
		display: none;
	}
	
	.main-tabs, .sub-tabs, .drop-tabs, .slide-tabs {
		list-style-type: none;
		cursor: pointer;
	}

JavaScript

$(document).ready(function(){
		$(".main-tabs span").click(function(){
			var self = $(this).toggleClass('open');
            
            var submenu = self.siblings('ul').slideToggle("fast", function(){
                if (!self.is('.open')){
                    // just closed
                    submenu.find('span+ul').hide();
                }
            });
		});
	});