JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main">
			<li class="none">Iteam
				<ul class="submenu">
					<li>Iteam 1</li>
					<li>Iteam 2</li>
				</ul>
			</li>
			<li>Iteam</li>
			<li>Iteam</li>
		</ul>

CSS

.main{
	border:1px solid;
	width: 320px;
	background: #f3f3f3;
	padding: 0;
	margin: 0;
}
.main:after{
	content:"";
	display: block;
	clear: both;
}
li{
	list-style: none;
	margin-left: 30px;
	float: left;
}
.none{
	position: relative;
}
.submenu{
	width: 100px;
	padding: 0;
	position: absolute;
	left: -35px;
	top:25px;
	display: none;
}
.none:hover .submenu{
	display: block;
}