JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.min.js"></script>
 </head> 
 <body>
<script type="text/javascript">
		jQuery(document).ready(function(){
		jQuery(".menu li").hover(
			function(){
			jQuery(this).find('ul').show();
			},
			function(){
			jQuery(this).find('ul').hide();
			}
			);
	});


</script>

<section id="section_saidbar">	
<div class="menu-navegru-container"><ul id="menu-navegru" class="menu"><li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116"><a>Зовнішня реклама</a>
<ul class="sub-menu">
	<li id="menu-item-123" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-123"><a href="#">Білборди</a></li>
	<li id="menu-item-127" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-127"><a href="#">Об’ємні світлові/несвітлові літери</a></li>
	<li id="menu-item-125" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-125"><a href="#">Бокси та лайтбокси</a></li>
	<li id="menu-item-126" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-126"><a href="#">Вивіски</a></li>
	<li id="menu-item-128" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-128"><a href="#">Стенди</a></li>
	<li id="menu-item-129" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-129"><a href="#">Банери</a></li>
	<li id="menu-item-122" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-122"><a href="#">– та ще багато цікавого</a></li>
</ul>
</li>
<li id="menu-item-117" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-117"><a>Подарунково – сувенірна  продукція</a>
<ul class="sub-menu" style="display: none;">
	<li id="menu-item-222" class="menu-item...

CSS

#section_saidbar{
		text-align: center;
		width: 27%;
		max-width: 240px;
		min-width: 200px;
		height: 85%;
		margin: 1% 2% 0 12%;
		padding: 2% 1% 0 0;
		float: left;
		font-family: 'Myriad Pro';
		font-weight: bold;
		font-size: 100%;
	}
*{
	list-style-type: none;
	text-decoration: none;
}
 .menu-item-object-custom:nth-child(5n+1) { /*1 and 6*/
			width: 85%; 
			display:  block;
			vertical-align: middle;		
		margin: 0% 5% 4% 6%;
		padding: 7% 2%;

		background: #f1ad54;
 }
		.menu-item-object-custom:nth-child(5n+1):hover {
			background: #ffeba1;
		}

 		.menu-item-object-custom:nth-child(3n+2){ /*oll*/  
			display:  block;
			vertical-align: middle;		
			margin: 0% 4% 2% 8%;
			padding: 3% 3%;
			width: 90%;
			background: #f1ad54;

 }
		.menu-item-object-custom:nth-child(3n+2):hover {
			background: #ffeba1;
		}

		 .menu-item-has-children:nth-child(3){
		margin: 6% 15% 6% 15%;
		padding: 7% 0%;
			font-size: 160%;
			vertical-align: middle;			
			display:  block;		
	}
	.menu-item-object-custom:nth-child(3):hover{
		-webkit-box-shadow: rgba(255,235,161,1) 0 0 15px;
		-moz-box-shadow: rgba(255,235,161,1) 0 0 15px;
		box-shadow: rgba(255,235,161,1) 0 0 15px; 
		text-shadow: #ffeba1 0px 0px 20px;
	}

	
	.menu-item-object-custom:nth-child(4){
		margin: 6% 15% 6% 15%;
		padding: 4% 0%;
			vertical-align: middle;			
			display:  block;
			line-height: 0.9;
	}
	.menu-item-object-custom:nth-child(4):hover{
		-webkit-box-shadow: rgba(255,235,161,1) 0 0 15px;
		-moz-box-shadow: rgba(255,235,161,1) 0 0 15px;
		box-shadow: rgba(255,235,161,1) 0 0 15px; 
		text-shadow: #ffeba1 0px 0px 20px;
	}

	.menu-item-object-custom:nth-child(6){
			margin: 10% 0 0 0;
			-moz-transform: rotate(6deg); /* Для Firefox */
			-ms-transform: rotate(6deg); /* Для IE */
			-webkit-transform: rotate(6deg); /* Для Safari, Chrome, iOS */
			-o-transform: rotate(6deg); /* Для Opera */
			transform: rotate(6deg);
	}
	
 .sub-menu{
	cursor: pointer;
	position: absolute;
	z-index: 5001;
	left:...