JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
 <ul class="q1">
 <li>
	<a href="#">123</a>
		<ul class="q2">
		<li><a href="#">111</a></li>
		<li><a href="#">222</a></li>
		<li><a href="#">333</a></li>
		</ul>
</li>
 <li>
	<a href="#">123</a>
		<ul class="q2">
		<li><a href="#">111</a></li>
		<li><a href="#">222</a></li>
		<li><a href="#">333</a></li>
		</ul>
</li>
</ul>
</nav>
<p>23212123</p>

CSS

* {
  box-sizing: border-box;
  margin:0;
  padding:0;  
}
.q1{
	position:absolute;
	width:100%;
	top:0;left:0;
}
.q1>li{
	display:inline-block;
	position:relative;
	vertical-align:top;
	z-index:1000;
	overflow:hidden;
	height:42px;
	transition:all 1s;
	width:17%;
}
.q1>li>a{
	display:inline-block;
	text-decoration:none;
	padding:12px 0px;
	width:100%;
	text-align:center;
	background:black;
}
.q2{
	position:absolute;
	top:-90px;
	left:0;	
	width:100%;
	transition:all 1s;
	z-index:-1;
}
.q2>li{
	display:block;
}
.q2>li> a{
	display:inline-block;
	padding:12px 0px;
	width:100%;
	text-align:center;
	background:red;
	margin-bottom:3px;
}
.q1>li:hover .q2{
	top:45px;
}
.q1>li:hover{
	height:177px;
}
.q2>li:last-child a{
	margin-bottom:0;
}
nav{
	position:relative;
	height:48px;
	margin:50px 0 0 20px;
}