JSFiddle - React, Tailwind, and code Playground

by Candlejack

HTML

<div class="wrapper">
<ul>
	<li class="level-1"><a href="#">Item 1</a>
		<ul class="level-2">
		<li><a href="#">Item 1-1</a></li>
		<li><a href="#">Item 1-2</a></li>
		</ul>
	</li>
	<li class="level-1"><a href="#">Item 2</a>
		<ul class="level-2">
		<li><a href="#">Item 2-1</a>
			<ul class="level-3">
			<li><a href="#">Item 2-1-1</a></li>
			</ul>
		</li>
		</ul>
	</li>
	<li class="level-1"><a href="#">Item 3</a>
		<ul class="level-2">
		<li><a href="#">Item 3-1</a></li>
		<li><a href="#">Item 3-2</a></li>
		<li><a href="#">Item 3-3</a></li>
		</ul>
	</li>
	<li class="level-1"><a href="#">Item 4</a>
		<ul class="level-2">
		<li><a href="#">Item 4-1</a></li>
		<li><a href="#">Item 4-2</a></li>
		</ul>
	</li>
	</ul>
</div>

CSS

body{
	margin: 0px;
	border: 0;
  overflow: hidden;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	color: #000000;
}

ul li {
	position: relative;
}

li ul {
	position: absolute;
	left: 120px;
	top: 0px;
	display: none;
}

ul li a {
	text-decoration: none;
	color: #000000;
}

.level-1 {
	position: relative;
	top: 20px;
	left: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	line-height: 15px;
	letter-spacing: 0em;
	text-transform: uppercase;
}

.level-2 {
	position: fixed;
	top: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	line-height: 15px;
	letter-spacing: 0em;
	text-transform: uppercase;
}

.level-3 {
	position: fixed;
	top: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	line-height: 15px;
	letter-spacing: 0em;
	text-transform: uppercase;
}

/* ADDITIONAL STYLING */

ul li { padding: 5px; }
.level-1 { background:skyblue; }
.level-2 { background:orange; }
.level-3 { background:pink; left: 200px; }

JavaScript

$('.level-2').hide();
  $('.level-1').on('click', function(){
    if(!($(this).children('.level-2').is(':visible'))){
        $('.level-2').slideUp();
        $(this).children('.level-2').slideDown();
    } else {
        $('.level-2').slideUp();
        $('.level-3').css( "display", "none" );
  }
});
$('.level-2').on('click', function(e){
      e.stopPropagation();
    
    if($('.level-3').css('display') === 'none'){        
        $('.level-3').css( "display", "block" );
    } else {
        $('.level-3').css( "display", "none" );
  }
});