JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
  <li class="sub-cat">
  	<a href="/shop/catalog/forface#forface" class="a-cat">Косметика для лица</a>
  	 <ul class="sub-nav" id="forface">
    <li class="in-sub-nav"><a href="/shop/catalog/forface/ffcrem">Тональные крема</a></li>
    <li class="in-sub-nav"><a href="/shop/catalog/forface/ffcor">Корректоры</a></li>
    <li class="in-sub-nav"><a href="/shop/catalog/forface/ffpudra">Пудры</a></li>
    <li class="in-sub-nav"><a href="/shop/catalog/forface/ffrum">Румяна</a></li>
    <li class="in-sub-nav"><a href="/shop/catalog/forface/ffpray">Праймер</a></li>
    </ul>
  </li>
  <li class="sub-cat">
    <a href="/shop/catalog/foreye#foreye" class="a-cat">Косметика для глаз</a>
    <ul class="sub-nav" id="foreye">
    <li class="in-sub-nav"><a href="/shop/catalog/foreye/eyeten">Тени</a></li>
    <li class="in-sub-nav"><a href="/shop/catalog/foreye/eyepen">Карандаши</a></li>
    <li class="in-sub-nav"><a href="/shop/catalog/foreye/eyetush">Тушь для ресниц</a></li>
    <li class="in-sub-nav"><a href="/shop/catalog/foreye/eyeclear">Для снятия макияжа</a></li>
    <li class="in-sub-nav"><a href="/shop/catalog/foreye/eyepray">Праймер</a></li>    
    </ul>
  </li>
  <li class="sub-cat">
    <a href="/shop/catalog/forlips#forlips" class="a-cat">Косметика для губ</a>
    <ul class="sub-nav" id="forlips">
    <li class="in-sub-nav"><a href="/shop/catalog/forlips/flpom">Помада</a></li>
    <li class="in-sub-nav"><a href="/shop/catalog/forlips/flblesk">Блеск</a></li>
    <li class="in-sub-nav"><a href="/shop/catalog/forlips/flpen">Карандаши</a></li>
    <li class="in-sub-nav"><a href="/shop/catalog/forlips/flbal">Бальзам</a></li>
    <li class="in-sub-nav"><a href="/shop/catalog/forlips/flpray">Праймер</a></li>
    </ul>
  </li>
  <a href="/shop/catalog/parfum" ><li class="sub-cat"><span class="mlinnav">Парфюмерия</span></li></a>
  <li class="sub-cat">
    <a href="/shop/catalog/forbody#forbody" class="a-cat">Уход за телом</a>
    <ul class="sub-nav"...

CSS

.mlinnav {
    margin-left: 30px;
}

.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;
}