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 /> <br /> <br /> <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%;
 overflow:hidden;
 background:green;
 position:relative;
 }
.menu ul{list-style:none;}
.menu ul li{ margin-left:20px;position:relative; float:left}
.menu ul ul{display:none;}
.menu ul li:hover ul{display:block; background:black;}
.menu ul li:hover ul li{ float:none;}