JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<ul class="cat_menu">
		<li class="list-parent">
				<a href="/catalog/shoes/">Обувь</a>
				<ul>
							<li>
								<a href="/catalog/pantolety/">Пантолеты</a>
                								<ul>
									<li>
										<a href="/catalog/women-s-shoes/"> Пантолеты Женские</a>
									</li>
									<li>
										<a href="/catalog/shoes-mens/">Пантолеты Мужские</a>
									</li>
				        </ul>
							</li>
							<li>
								<a href="/catalog/slippers/">Тапочки</a>
							</li>
							<li>
								<a href="/catalog/shoess/">Туфли</a>
								<ul>
									<li>
										<a href="/catalog/women-s-shoes/"> Туфли Женские</a>
									</li>
									<li>
										<a href="/catalog/shoes-mens/">Туфли Мужские</a>
									</li>
									<li>
										<a href="/catalog/shoes-mens/">Туфли Детские</a>
									</li>
				        </ul>
						  </li>
				</ul>
		</li>
		<li class="list">
				<a href="/catalog/dresses/">Платья</a>
		</li>
		<li class="list">
				<a href="/catalog/pants/">Штаны</a>
		</li>
		<li class="list">
				<a href="/catalog/underwear/">Нижнее белье</a>
		</li>
		<li class="list">
				<a href="/catalog/t-shirts/">Футболки</a>
		</li>
		<li class="list">
				<a href="/catalog/sportswear/">Спортивная Одежда</a>
		</li>
		<li class="list-parent">
				<a href="/catalog/accessories/">Аксессуары</a>
				<ul>
							<li>
								<a href="/catalog/belts/">Ремни</a>
								<ul>
									<li>
										<a href="/catalog/women-s-belts/">Ремни Женские</a>
									</li>
									<li>
										<a href="/catalog/men-s-belts/">Ремни Мужские</a>
									</li>
								</ul>
							</li>
				</ul>
		</li>
</ul>
<p>
Да здравствует Африка!
</p>

CSS

ul
      {
        list-style: none;
      }
p
      {
        color: #455;
      }
.cat_menu
      {
        background: #e8e4f2;
        position: relative;
      }
.cat_menu >  li, .list-parent > ul > li
      {
        display: inline-block;
        vertical-align: top;
      }
.cat_menu  a 
      {
        text-decoration: none; 
        color: #424;
        white-space: nowrap;
        font: normal 100% Trebuchet MS;
        display: block;
        padding: 5px;
      }
.cat_menu > li > a
      {
        font-size: 110%;
        padding: 0 10px;
        line-height: 40px;
        color: #646266;
        text-shadow: 2px 2px 0 #d3eeeb;
      }
.cat_menu > li > a:hover
      {
        color: #60c0d1;
        background: rgba(255, 255, 255, 0.4);        
      }
.cat_menu a:hover
      {
        color: #6070d1;        
      }
.list-parent > ul
      {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        transition: all 1s ease;
      }
.list-parent:hover > ul
      {
        visibility: visible;
        opacity: 1;
        z-index: 2;
      }
.list-parent > ul
      {
        background: #fff;
        width: 100%;
        padding: 20px 12px;
#        overflow: hidden;
        left: 0;
        box-shadow: 0 3px 12px rgba(35, 45, 100, .12);
      }
.list-parent > ul > li > ul
      {
        visibility: hidden;
        opacity: 0;
        transition: all 1s ease;        
      }
.list-parent > ul > li > a:hover + ul, .list-parent > ul > li > a + ul:hover
      {
        visibility: visible;
        opacity: 1;
      }