JSFiddle - React, Tailwind, and code Playground
HTML
<div class="menu">
<p class="header-menu">Меню</p>
<ul class="menu-list" id="menu-list">
<li>
<a href="/category/bamper">Категория 1</a>
<span id="">48</span>
</li>
<li class="active">
<p>Активный пункт</p>
<span id="">12</span>
</li>
<li>
<a href="/category/bamper">Категория 2</a>
<span id="">54</span>
</li>
<li>
<a href="/category/bamper">Категория 3</a>
<span id="">80</span>
</li>
</ul>
</div>
<div class="menu" style="margin-top: 20px;">
<p class="header-menu">Меню</p>
<ul class="menu-list">
<li class="active">
<p>Активный пункт</p>
<span id="">12</span>
</li>
</ul>
</div>
CSS
.menu {
border-radius: 8px;
overflow: hidden;
background-color: #FFF;
padding: 10px;
box-shadow: 0 0 4px;
width: 60%;
margin: 0 auto;
}
.header-menu{
margin: 0;
font-size: 180%;
text-align: center;
padding: 10px;
cursor: pointer;
}
.menu-list{
padding: 0;
margin: 0;
list-style: none;
}
.menu-list>li {
width: 100%;
display: block;
overflow: auto;
}
.menu-list>li:hover {
background-color: #eee;
}
.menu-list>li.active{
background-color: #34495e;
}
.menu-list>li.active>p{
margin: 0;
color: #fff;
padding: 10px;
display: block;
float: left;
width: 100%;
max-width: 70%;
}
.menu-list>li.active>span{
background-color: #ecf0f1;
color: #34495e;
}
.menu-list>li>a {
padding: 10px;
display: block;
color: #2980B9;
float: left;
width: 100%;
max-width: 70%;
}
.menu-list>li>span {
float: right;
padding: 6px;
background-color: #6EBDE2;
border-radius: 10px;
color: #FFF;
margin: 4px;
}
JavaScript
$('.header-menu').click(function(){
$('#menu-list>li').slideUp();
$('#menu-list>li.active').stop().slideDown();
})