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: auto;
	height: 486px;
}
	.slide_menu .fon_menu {
		display: none;
		margin-top: 0;
	}
	.slide_menu:hover .fon_menu {
		display: block;
    background-color:#f2c51b;
    
	}