JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
	<ul class="nav">
		<li><a>title 1</a></li>
		<li><a>title 2</a></li>
		<li>
			<a>title 3</a>
			<ul>
				<li><a>subtitle 1 subtitle 1</a></li>
				<li><a>subtitle 2 subtitle 2</a></li>
			</ul>
		</li>
	</ul>
</div>

CSS

* {
			margin: 0;
			padding: 0;
		}
		li {
		    list-style: none;
		}
		#main {
			background-color: blue;
			text-align: center;
		}
		.nav > li {
			position: relative;
			display: inline-block;
			background-color: red;
		}

		.nav ul {
			position: absolute;
		}

		.nav li li {
			text-align: left;
			display: block;
		}