JSFiddle - React, Tailwind, and code Playground

by koodo218

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 {position: absolute;display:block;top:16px;right: 200px;}
ul > li > ul > li {  }