JSFiddle - React, Tailwind, and code Playground

by Zero Fx

HTML

<div class="center">
	
	<ul class="menu">
		<li><a href="#">TEST1
		<ul class="hide">
			<li><a href="#">TEST2</a></li>
		</ul>
		</a></li>
		<li><a href="#">TEST1-2</a></li>
	</ul>

</div>

CSS

* {
	padding: 0;
	margin: 0;
}

.center {
	width: 300px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
	background-color: #FA9100;
}

.left .menu {
	display: inline-block;
	position: relative;
	text-align: center;
}

.menu li {
	display: inline-block;
	background-color: #fff;
}

.menu li:hover > .hide {
	/*display: block;*/
	visibility: visible;
	transform: perspective(600px) rotateX(0deg);
	-ms-transform: perspective(600px) rotateX(0deg);
	-moz-transform: perspective(600px) rotateX(0deg);
	-webkit-transform: perspective(600px) rotateX(0deg);
	-o-transform: perspective(600px) rotateX(0deg);
}

.hide {
	/*display: none;*/
	position: absolute;
	visibility: hidden;
}

.hide li {
	float: none;
	position: relative;
}