JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drop-menu">
	<ul>
		<li><a href="#">Item 1</a>
			<ul>
				<li><a href="#">Subitem 1</a></li>
				<li><a href="#">Subitem 2</a></li>
				<li><a href="#">Subitem 3-Subitem 3</a></li>
			</ul>
		</li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>

CSS

.drop-menu{
	margin: 0 20px 50px;
	background: #f0f0f0;
}
.drop-menu ul{
	list-style: none;
	margin: 0 20px;
	padding: 0;
}
.drop-menu li{
	float: left;
	position: relative;
}
.drop-menu li a{
	display: inline-block;
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
	background: #69c;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
}
.drop-menu li a:hover{
	background: #369;
}
.drop-menu li ul{
	display: none;
	margin: 0;
	position: absolute;
	z-index: 10;
	left: 0;
}
.drop-menu li:hover ul{
	display: block;
}
.drop-menu li li{
	float: none;
}
.drop-menu li li a{
	display: block;
	background: #f60;
}
.drop-menu li li a:hover{
	background: #d30;
}