JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

ul {
    list-style: none;
}
.cat_menu {
  min-width: 100%;
	float: left;
#	height: 40px;
	background: #fd8a1a;
}
.cat_menu > ul {
	width: 980px;
	margin: 0 auto;
	position: relative;
}
.cat_menu > ul > li {
#	width: auto;
	float: left;
}
.cat_menu > ul > li > a {
	font: normal 100% Trebuchet MS;
	color: #252525;
	text-decoration: none;
	padding: 0 10px;
	display: block;
#	height: 40px;
	line-height: 40px;
    text-shadow: 1px 1px 0 white;
    text-transform: uppercase;
    white-space: nowrap;
}
.cat_menu > ul > li > a:hover {
    color: #8235f6;
    background: rgba(255, 255, 255, 0.3);
}/*
.cat_menu ul .list-active a, .list-active-parent a {
	color: #8235f6;
	background: rgba(255, 255, 255, 0.3);
}*/
.cat_menu ul .list-parent > ul/*, .list-active-parent > ul */{
	visibility: hidden;
	z-index: 999;
	box-shadow: 0 6px 13px 0 rgba(0, 0, 0, .13);
	position: absolute;
#	top: 40px;
	left: 0;
	background: #fff;
	width: 100%;
#	overflow: hidden;
	padding: 50px 0;
transition: all 0.5s ease;
opacity: 0;
}
.cat_menu ul .list-parent:hover > ul/*, .list-active-parent:hover > ul */{
	visibility: visible;
opacity: 1;
}
.cat_menu ul .list-parent > ul > li/*, .list-active-parent > ul > li */{
	float: left;
	padding: 0 10px;
#	width: auto;
}
.cat_menu ul .list-parent > ul > li > a/*, .list-active-parent > ul > a */{
	font: normal 100% Trebuchet MS;
	color: #252525;
	text-transform: none;
	text-decoration: none;
}
.cat_menu ul .list-parent > ul > li > a:hover, .cat_menu ul .list-parent > ul > li > ul > li > a:hover/*, .list-active-parent > ul > li > a:hover*/ {
    color: #8235f6;
#    background: rgba(255, 255, 255, 0.3);

}
.cat_menu ul .list-parent > ul > li > ul > li/*, .list-active-parent > ul > li > ul > li */{
	padding: 10px;
}
.cat_menu ul .list-parent > ul > li > ul > li > a/*, .list-active-parent > ul > li > ul > li > a */{
	font: normal 87.5% Trebuchet MS;
	color: #252525;
	text-transform: none;
	text-decoration: none;
}
p
      {
        color: #642;
      }