JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<ul class="list">
	<li class="item">
		<a href="#" class="link">Link 1 - hover me</a>
		
		<ul class="sub-list">
			<li class="sub-item">
				<a href="" class="sub-link">Sub link 1</a>
			</li>
			
			<li class="sub-item">
				<a href="" class="sub-link">Sub link 2</a>
			</li>
			
			<li class="sub-item">
				<a href="" class="sub-link">Sub link 3</a>
			</li>			
		</ul>
	</li>
	
	<li class="item">
		<a href="#" class="link">Link 2</a>
	</li>
	
	<li class="item">
		<a href="#" class="link">Link 3</a>
	</li>	
</ul>

CSS

*{
	font-family:sans-serif
}

.list{
	text-align:center;
}

.item{	
	padding:0 10px;
	display:inline-block;
	position:relative
}

.sub-list{
	top:20px;
	left:10px;
	opacity:0;
	visibility:hidden;
	background-color:#FFF;
	position:absolute
}

.item:hover .sub-list{
	opacity:1;
	visibility:visible;
}