JSFiddle - React, Tailwind, and code Playground

by rus333

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>
														</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 level-->
									<li>
										<a href="/catalog/women-s-belts/">Ремни Женские</a>
									</li>
									<!-- third level-->
									<li>
										<a href="/catalog/men-s-belts/">Ремни Мужские</a>
									</li>
																</ul>
														</li>
												</ul>
											</li>
				</ul>
	</nav>

CSS

ul {
    list-style: none;
}
.cat_menu {
	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;
}
.cat_menu ul .list-parent:hover > ul, .list-active-parent:hover > ul {
	visibility: visible;
}
.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, .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;
}