JSFiddle - React, Tailwind, and code Playground

HTML

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

<li class="q2"><a href="#">123</a><ul class="q3"><li><a href="#">111</a></li><li><a href="#">222</a></li><li><a href="#">333</a></li></ul></li>
</ul>

CSS

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