JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
<ul>
	<li><a href="#">aaaaaaaaaa</a></li>
	<li><a href="#">bbbbbbbbbb</a>
		<ul>
			<li><a href="#">aaaaaaaaaa</a></li>
			<li><a href="#">bbbbbbbbbb</a></li>
		</ul>
	</li>
</ul>
</div>

<br /><br />i did not give to much styles i just want to solve my problem then i will style it

CSS

.menu{
 width:70%;
 background:green;
 position:relative;
 }
.menu ul{list-style:none;display: inline-block;}
.menu ul li{ margin-left:20px;position:relative; float:left}
.menu ul ul{display:none;}
.menu ul li:hover ul{display:block; background:black;
position: absolute; margin: -2px 0 0 0; z-index: 11110;}
.menu ul li:hover ul li{ float:none; height:20px; }