JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
		<ul>
			<li>Nav #1
				<ul>
					<li>SubNav #1.1</li>
				</ul>
			</li>
			<li>Nav #2
				<ul>
					<li>SubNav #2.1</li>
					<li>SubNav #2.2</li>
				</ul>
			</li>
			<li>Nav #3
				<ul>
					<li>SubNav #3.1</li>
					<li>SubNav #3.2</li>
					<li>SubNav #3.3</li>
				</ul>
			</li>
			<li>Nav #4
				<ul>
					<li>SubNav #4.1</li>
					<li>SubNav #4.2</li>
					<li>SubNav #4.3</li>
					<li>SubNav #4.3</li>
				</ul>
			</li>
		</ul>
	</nav>

CSS

nav { width: 225px; margin: 0 auto; }
ul { list-style: none; }
ul > li { }
ul > li > ul { display: none; }
ul > li:hover > ul { display: block; float: right; position: relative; }
ul > li > ul > li {  }