JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<ul class="menu2">
	<li>
	<div>Ипотека</div>
		<ul class="menu2IntoUl">
			<li><div>БЖФ</div>
				<ul class="menu2IntoUl2"><li><a href="index.php?function=1&amp;post=1&amp;post2=1">«ВОЕННАЯ ИПОТЕКА - АИЖК»</a></li>
					<li><a href="index.php?function=1&amp;post=1&amp;post2=2">«Квартира - АИЖК»</a></li>
					<li><a href="index.php?function=1&amp;post=1&amp;post2=3">«Под залог»</a></li>
					<li><a href="index.php?function=1&amp;post=1&amp;post2=4">«Под залог квартиры»</a></li>
					<li><a href="index.php?function=1&amp;post=1&amp;post2=5">Кредитный продукт «Универсальный»</a></li>
					<li><a href="index.php?function=1&amp;post=1&amp;post2=6">Кредитный продукт «Экспресс ипотека»</a></li>
				</ul>
			
			</li>
			<li><div>Абсолют-банк</div>
			<ul class="menu2IntoUl2">
			<li><a href="index.php?function=1&amp;post=3&amp;post2=1">Ипотечное кредитование от «Банк Западный»</a></li>
			<li><a href="index.php?function=1&amp;post=3&amp;post2=2">Ипотека</a></li>
			<li><a href="index.php?function=1&amp;post=3&amp;post2=3">Кредиты на любые цели</a></li>
			<li><a href="index.php?function=1&amp;post=3&amp;post2=4">Миллионер - кредиты</a></li>
			</ul>
			
			
			</li>
			<li><div>Мираф-Банк</div>
			<ul class="menu2IntoUl2"><li><a href="index.php?function=1&amp;post=2&amp;post2=1">ЗАО КБ «Мираф-Банк»</a></li>
	</ul>
			</li>
			<li><div>Банк Западный</div>
				<ul class="menu2IntoUl2"><li><a href="index.php?function=1&amp;post=3&amp;post2=1">Ипотечное кредитование от «Банк Западный»</a></li>
					<li><a href="index.php?function=1&amp;post=3&amp;post2=2">Ипотека</a></li>
					<li><a href="index.php?function=1&amp;post=3&amp;post2=3">Кредиты на любые цели</a></li>
					<li><a href="index.php?function=1&amp;post=3&amp;post2=4">Миллионер - кредиты</a></li>
				</ul>
			
			</li>
			<li><div>Инвестторгбанк</div>
			<ul class="menu2IntoUl2"><li><a href="index.php?function=1&amp;post=4&amp;post2=1">БУ Надежный</a></li>
			<li><a...

CSS

*{
padding: 0px;
margin: 0px;
}
.menu2,.menu2 ul,.menu2 li,.menu2 div{
padding: 0px;
margin: 0px;
text-shadow: none;
font-size: 13px;
font-family: Arial;
}
.menu2 a:link, .menu2 a:visited{
text-decoration: none;
display: block;
}
.menu2>li>div>a:link, .menu2>li>div>a:visited{
height: 100%;'
}
.menu2{
list-style: none;
background: #fe6f00;
border 1px solid #f1ec89;
width: 200px;
border-radius: 10px;
margin-left: 10px;
}
.menu2 ul{
list-style: none;
}
.menu2>li{
background: #f1740e;
position: relative;
box-shadow: 1px 1px 1px black;

}

.firstBorder{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.lastBorder{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.menu2>li>div{
height: 25px;
left: 0px;
z-index: 1;
padding: 10px 0px 10px 10px;
border: 1px solid #8f6112;
font-weight: bold;
font-style: oblique;
color: #ffeddb;
}
.menu2>li>div:hover{
cursor: pointer;
background: url(http://вавилон-риелт.рф/images/menuLiAH.png);
color: #6d5fd3;
}
.menu2>li>div a:hover{
color: #6d5fd3;
}
.menu2db{
background: url(http://вавилон-риелт.рф/images/menuLiA.png);
}
.menu2db a:link,.menu2dba:visited{
color: #ffeddb;}
.Slideup{
position: relative;
background: #be631f ;
box-shadow: 0px 2px 1px 1px black;
border-bottom-right-radius: 10px;
background: url(http://вавилон-риелт.рф/images/menuLiAH.png);
color: #6d5fd3;

}
.Slideup2{
position: relative;
background: #be631f ;
box-shadow: 0px 1px 1px 1px #d98026;
border-bottom-right-radius: 3px;
background: url(http://вавилон-риелт.рф/images/menuLiAH.png);
color: #6b50dc;

}

.liNone{
z-index: 1;
}
.liUp{
z-index: 2;

}
.menu2IntoUl{
background: #f88d4e;
position: relative;
z-index: 1;
font-weight: bold;
font-style: oblique;

}
.menu2IntoUl>li{
padding: 0px;
background:#fce3a3 url(http://вавилон-риелт.рф/images/menuLiA.png);
color: #1b42de;
border-bottom: 1px solid #d86701;
color: #271c77;
text-shadow: 1px 1px 1px #dfdfdf;
}
.menu2IntoUl>li a:link, .menu2IntoUl>li a:visited{
color: #271c77;
text-shadow: 1px...

JavaScript

$('.menu2 li').addClass("liNone");
$('.menu2>li>div').addClass("menu2db");
$('.menu2>li:eq(0),.menu2>li:eq(0)>div:eq(0)').addClass("firstBorder");
$('.menu2>li:last,.menu2>li:last>div:last').addClass("lastBorder");
$('.menu2 li ul').slideUp("fast");
$('.menu2>li>div').click(
	function(){
	if($(this).is(".Slideup")){
		$(this).closest('li').find(".menu2IntoUl").slideUp("slow");
		$(this).css({"z-index": "1"});
		$(this).animate({width: "188px",paddingLeft:"10px"},500);
		$(this).removeClass("Slideup");
		$(this).removeClass("liUp");
		$('.menu2 div').slideDown("slow");
	}else{
		$('.menu2 li ul').slideUp("slow");
		$('.menu2>li>div').css({width: "188px",paddingLeft:"10px"});
		$('.menu2>li>div').removeClass("Slideup");
		$('.menu2>li>ul>li>div').removeClass("Slideup2");
		$('.menu2 li').removeClass("liUp");
		$(this).addClass("Slideup");
		$(this).closest('li').addClass("liUp");
		$(".Slideup").animate({width: "222px",paddingLeft:"20px"},500);
		$(".Slideup").css({"z-index": "2"})
		$(this).closest('li').find(".menu2IntoUl").slideDown("slow");
		}
		
	});
	$('.menu2>li>ul>li>div').click(
	function(){
	if($(this).is(".Slideup2")){
		$(this).closest('li').find(".menu2IntoUl2").slideUp("slow");
		$(this).css({"z-index": "1"});
		$(this).animate({width: "188px",paddingLeft:"20px"},500);
		$(this).removeClass("Slideup2");
		$(this).removeClass("liUp");
	}else{
		$('.menu2 li ul li ul').slideUp("slow");
		$('.menu2 li ul li div').css({width: "188px",paddingLeft:"20px"});
		$('.menu2 li  ul li div').removeClass("Slideup2");
		$('.menu2 li ul li').removeClass("liUp");
		$(this).addClass("Slideup2");
		$(this).closest('li').addClass("liUp");
		$(this).animate({width: "202px",paddingLeft:"20px"},500);
		$(this).css({"z-index": "2"})
		$(this).closest('li').find(".menu2IntoUl2").slideDown("slow");
		}
		
	});