JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
  <li class="sub-cat">
  	<a href="http://mak.eeva/shop/catalog/forface#forface" class="a-cat">Косметика для лица</a>
  	 <ul class="sub-nav" id="forface">
    <li class="in-sub-nav"><a href="#">Основа для макияжа</a></li>
    <li class="in-sub-nav"><a href="#">Тональный крем</a></li>
    <li class="in-sub-nav"><a href="#">Корректор</a></li>
    <li class="in-sub-nav"><a href="#">Рассыпчатая пудра</a></li>
    <li class="in-sub-nav"><a href="#">Компактная пудра</a></li>
    <li class="in-sub-nav"><a href="#">Румяна</a></li>
    <li class="in-sub-nav"><a href="#">Аксессуары</a></li>
    <li class="in-sub-nav"><a href="#">Крем-пудра</a></li>
    </ul>
  </li>
  <li class="sub-cat">
    <a href="http://mak.eeva/shop/catalog/foreye#foreye" class="a-cat">Косметика для глаз</a>
    <ul class="sub-nav" id="foreye">
    <li class="in-sub-nav"><a href="#">Тени</a></li>
    <li class="in-sub-nav"><a href="#">Карандаш для глаз</a></li>
    <li class="in-sub-nav"><a href="#">Карандаш для бровей</a></li>
    <li class="in-sub-nav"><a href="#">Подводка для глаз</a></li>
    <li class="in-sub-nav"><a href="#">Тушь для ресниц</a></li>
    <li class="in-sub-nav"><a href="#">Для снятия макияжа</a></li>
    <li class="in-sub-nav"><a href="#">Аксессуары</a></li>    
    </ul>
  </li>
  <li class="sub-cat">
    <a href="http://mak.eeva/shop/catalog/forlips#forlips" class="a-cat">Косметика для губ</a>
    <ul class="sub-nav" id="forlips">
    <li class="in-sub-nav"><a href="#">Губная помада</a></li>
    <li class="in-sub-nav"><a href="#">Блеск для губ</a></li>
    <li class="in-sub-nav"><a href="#">Карандаш для губ</a></li>
    <li class="in-sub-nav"><a href="#">Бальзам для губ</a></li>
    <li class="in-sub-nav"><a href="#">Аксессуары</a></li>
    </ul>
  </li>
  <li class="sub-cat">
    <a href="http://mak.eeva/shop/catalog/forbody#forbody" class="a-cat">Уход за телом</a>
    <ul class="sub-nav" id="forbody">
    <li class="in-sub-nav"><a href="#">Гель для...

CSS

.nav{
    width:250px;
    padding:0;
    font-family: sbold;
    font-size: 14px;
    border-top: 1px solid #ECECEC;
}

.a-cat:hover {
    color: black;
}

.nav li {
    list-style: none;
    min-height: 55px; 
    line-height: 55px;
}

.sub-cat {
    background: #FFF;
    cursor: pointer;
    border-bottom: 1px solid #ECECEC;
    border-right: 1px solid #ECECEC;
}

.sub-cat:hover {
    background: #F5F5F5;
}

.in-sub-nav:hover {
    background: linear-gradient(to right, #E8616A, #B53869);
}

.in-sub-nav a{
    display: block;
    color:white;
    padding-left: 19px;
}

.nav li a {
    text-decoration:none;
    margin-left: 30px;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.a-cat:hover {
    border-bottom: 1px solid #333;
}
.sub-cat {
    cursor:pointer;
}

.sub-nav {
    display:none;
    background: linear-gradient(to right, #FC6C75, #E04C86);
    padding:0;
}

.in-sub-nav {
    border-bottom: 1px solid #E85581;
}

.not-sub a{
    display: block;
}

.sub-nav:target {
  display: block;
}

.left-nav {
    float: left;
}

JavaScript

$(".sub-cat").click(function(){
	$(this).find(".sub-nav").slideToggle("fast");
	$(".sub-nav").not($(this).find(".sub-nav")).slideUp("fast");
});