JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
 <ul class="q1">
 <li>
	<a href="#">123<img src="line.png" width="30px" height="30px"></a>
		<ul class="q2">
		<li><a href="#">333</a><div class="vid"><a href="#" class="q44">124</a><a href="#" class="q33">OoO</a></div></li>
		<li><a href="#">333</a><a href="#" class="q4">123</a></li>
		<li><a href="#">333</a><div class="vid"><a href="#" class="q44">124</a><div class="yu"><a href="#" class="q55">OoO</a><ul class="q77">
				<li><a href="#">333</a></li>
				<li><a href="#">333</a></li>
				<li><a href="#">333</a></li>
				</ul></div></div></li>
		</ul>
</li>
 <li>
	<a href="#">123</a>
		<ul class="q2">
		<li><a href="#">333</a><a href="#" class="q4">123</a></li>
		<li><a href="#">333</a><a href="#" class="q4">123</a></li>
		<li><a href="#">333</a><a href="#" class="q4">xaxaxa</a></li>
		</ul>
</li>
</ul>
</nav>

CSS

* {
  box-sizing: border-box;
  margin:0;
  padding:0;  
}
.q1{
	position:absolute;
	width:100%;
	top:0;left:0;
	overflow:hidden;
	padding-left:15%;
}
.q1>li{
	display:inline-block;
	position:relative;
	vertical-align:top;
	z-index:1000;
	height:42px;
	transition:all 1s;
	width:17%;
}
.q1>li img{
	position:absolute;
	top:5px;
	left:5px;
	transition:all .3s;
}
.q1>li>a{
	display:inline-block;
	text-decoration:none;
	padding:12px 0px;
	width:100%;
	text-align:center;
	background:#FF6633;
}
.q2{
	position:absolute;
	top:-90px;
	left:0;	
	width:100%;
	transition:all 1s;
	z-index:-1;
}
.q2>li{
	display:block;	
	position:relative;
	width:100%;
	z-index:1000;
	margin-bottom:3px;
	transition:all .1s;
	float:left;
}
.q2>li> a{
	display:inline-block;
	padding:12px 0px;
	width:100%;
	text-align:center;
	background:#336699;
}
.q1>li:hover .q2{
	top:45px;
}
.q1>li:hover img{
	transform:rotate(90deg);
}
.q1>li:hover{
	height:360px;
}
nav{
	position:relative;
	height:48px;
	margin:50px 0 0 0px;
}
.q2>li>a.q4{
	position:absolute;
	top:0; left:0;
	background:blue;
	transition:all 1s;
	z-index:-1;
}
.q2>li:hover{
		margin-left:5px;
}
.q2>li:hover a.q4{
		left:101.5%;
}
.q1 li:first-child .q2 .q4{
	right:0;
	left:auto;
}
.q1 li:first-child .q2 li:hover .q4{
		right:101.5%;
}
.q1 li:first-child ul:not(.q77) li:hover{
	float:right;
	margin-left:0;
	margin-right:3px;
}
.q2>li>.vid{
	display:block;
	position:absolute;
	right:0;top:0;
	height:100%;
	width:100%;
	transition:all 1s;
	z-index:-1;
}
.q2>li .vid .q44{
	display:inline-block;
	right:0;top:0;
	width:100%;
	padding:12px 0;
	background:green;
	transition:all 1s;
}
.q2>li .vid .q33{
	display:inline-block;
	position:absolute;
	right:0;
	top:0;
	width:100%;
	height:100%;
	background:black;
	transition:all 1s;
	z-index:-1;
}
.q2>li:hover .vid{
	right:101.5%;
}
.q2>li .vid:hover .q33{
	top:108%;
}
.q2>li>.vid .yu{
	display:block;
	position:absolute;
	right:0;top:0;
	height:100%;
	width:100%;
	transition:all...

JavaScript

2