JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="Nav">
<ul class="accordionPart">
<li>
<div class="menu">AA</div>
<div class="content">
<ul class="sub">
<li>
<div class="menu">aa</div>
<div class="content">
<ul class="ter">
<li>
<div class="content">aaa</div>
<div class="content">aaa</div>
<div class="content">aaa</div>
</li>
</ul>
</div>
<div class="menu">aa</div>
<div class="content">
<ul class="ter">
<li>
<div class="content">aaa</div>
<div class="content">aaa</div>
<div class="content">aaa</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
CSS
ul, li{
margin:0;
padding:0;
list-style:none;
}
#Nav{
width:197px;
margin:0 auto;
}
#Nav ul.accordionPart {
background: #313132;
color: #fdfdfd;
font: bold 18px/32px Arial, sans-serif;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
display: block;
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
#Nav ul.accordionPart li .menu {
padding-left:5px;
color: #fff;
cursor: pointer;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
#Nav ul.accordionPart li .menu_on {
text-decoration: none;
background:#7ade2a
}
#Nav ul.accordionPart li .content {
margin: 6px 0 0;
padding-left: 10px;
color: #fff;
cursor: pointer;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
JavaScript
$(function(){
$('#Nav ul.accordionPart li div.menu').hover(function(){
$(this).addClass('menu_on');
}, function(){
$(this).removeClass('menu_on');
}).click(function(){
$(this).next('div.content').slideToggle();
}).siblings('div.content').hide();
});