JSFiddle - React, Tailwind, and code Playground

HTML

<!-- slide menu -->
	<div class="slide_menu">
		<div class="header-bot">
			<div class="width_1150">
				<div class="fon_menu">
					<nav class="menu_shop">
						<span class="vertical-text">Магазин товаров</span>
						<ul class="menu_wrap">
							<li class="gas"><a href="#">Бензоинструмент</a></li>
							<li class="electro"><a href="#">Электроинструмент</a></li>
							<li class="spare"><a href="#">Запчасти</a></li>
							<li class="consum"><a href="#">Расходники</a></li>
							<li class="consum"><a href="#">Сварочное оборудование</a></li>
							<li class="consum"><a href="#">Ручной инстумент</a></li>
						</ul>
					</nav>
					<nav class="menu_dop">
						<span class="vertical-text">Ремонт и обслуживание</span>
						<ul class="menu_wrap">
							<li><a href="#">Ремонт и обслуживание</a>
								 <ul class="sub-menu clearfix">
									<li class="sub-menu-item">
										<div class="sub-menu-section">
											<h4>Бензоинструмент</h4>
											<ul class="list clearfix">
												<li><a href="#">Бензопилы</a></li>
												<li><a href="#">Бенорезы</a></li>
												<li><a href="#">Мотокосы</a></li>
												<li><a href="#">Газонокосилки</a></li>
												<li><a href="#">Генераторы</a></li>
												<li><a href="#">Воздуходувы</a></li>										
												<li><a href="#">Мотобуры</a></li>
												<li><a href="#">Культиваторы</a></li>												
												<li><a href="#">Траншеекопатели</a></li>
												<li><a href="#">Кусторезы</a></li>
												<li><a href="#">Высоторезы</a></li>
											</ul>
										</div>
									</li>
									<li class="sub-menu-item">
										<div class="sub-menu-section">
											<h4>Электроинструмент</h4>
											<ul class="list clearfix">
												<li><a href="#">Дрели</a></li>
												<li><a href="#">Болгарки</a></li>
												<li><a href="#">Перфораторы</a></li>
												<li><a href="#">Шуруповерты</a></li>
												<li><a...

CSS

.slide_menu  {
	display: block;
	width: 74px;
	height: 267px;
	overflow: hidden;
	transition: 0.15s;
	position: absolute;
	top: 138px;
	left: 0;
	z-index: 1000;
	background: url('../images/slide_menu.png') no-repeat 0 0;
  background-color:#f2c51b;
}
.slide_menu:hover {
	background: none;
	overflow: visibility;
	width: 100%;
	height: 486px;
}
	.slide_menu .fon_menu {
		display: none;
		margin-top: 0;
	}
	.slide_menu:hover .fon_menu {
		display: block;
    background-color:#f2c51b;
	}
  
  
.fon_menu {
	position: relative;
	background: #f2c51b;
	float: left;
	z-index: 100;
	border-left: 1150px #f2c51b solid;
	margin:20px -100px 0 -100%;
	width: 365px;
}
	.fon_menu nav{ position: relative; }
		.vertical-text {
			position: absolute;
			display: block;
			color: rgba(29, 35, 40, .4);
			text-transform: uppercase;
			font: 10px 'acrommedium', sans-serif;
			-webkit-transform: rotate(-90deg);
			transform: rotate(-90deg);
			letter-spacing:2px
		}
		.menu_shop .vertical-text {
			top: 85px;
			left:-45px;
		}
		.menu_dop .vertical-text {
			top: 110px;
			left:-75px;
		}
		@-moz-document url-prefix() {
			.menu_dop .vertical-text {bottom: 135px;}
		}
		.menu_shop ul,
		.menu_dop ul {
			border-left: 1px rgba(0, 0, 0, .1) solid;
			border-bottom: 1px rgba(0, 0, 0, .1) solid;
			padding: 20px 0px 10px 25px;
			margin-left: 40px;
		}
		.menu_dop ul {border-bottom:0;}
		
		.menu_shop {	}
			
			.menu_shop li{
				color: rgba(29, 35, 40, .7);
				font: 12px 'acrombold', sans-serif;
				text-transform: uppercase;
				margin-bottom: 7px;
				padding: 5px 0 5px 40px;
				background-repeat: no-repeat;
				background-position: 0 40%;
			}
				.menu_shop li a{
					text-decoration: none;
				}
				.menu_shop li a:hover{
					text-decoration: underline;
				}
				
		.menu_dop .menu_wrap {
			position: relative;
			z-index: 1;
			height: 212px;
		}
		@-moz-document url-prefix() {
			.menu_dop .menu_wrap {height: 230px;}
		}
			.menu_dop .menu_wrap > li {
				list-style:...