JSFiddle - React, Tailwind, and code Playground
HTML
<nav>
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
</ul>
</nav>
CSS
a{
font-family:arial,helvetica;
font-size:14px;
text-decoration:none;
color:#444;
}
nav{
width:200px;
border:1px solid #9e9e9e;
border-radius:4px;
}
ul,li{
margin:0;
padding:0;
list-type:none;
position:relative;
}
li a{
display:block;
position:relative;
padding:6px 12px;
border-bottom:1px solid #9e9e9e;
}
ul ul>li>a{
padding-left:24px;
}
li > a::after{
display:block;
content:'⇩';
padding:4px 6px;
text-align:center;
width:20px;
position:absolute;
right:0;
top:0;
}
li>a:only-child::after{
content:'';
}
li>ul{
display:none;
}
li.open ul{
display:block;
}
}
li.open>a::after{
content:'⇧';
}
li.active > a{
background-color:#efefef;
}
JavaScript
var nav = $('nav');
nav.find('li>a').on('click',function(e){
e.preventDefault();
var $this = $(this);
var $li = $this.parent();
//set active state to clicked menu item:
$li.addClass('active').siblings().removeClass('active open');
//look if there is a UL after the A, if so it contains submenu:
if($this.next().is('ul')){
$li.toggleClass('open');
}
});