JSFiddle - React, Tailwind, and code Playground

by Van Hai Le

HTML

<ul class='menu'>
	<li><a href="">Home</a></li>
	<li class='has-submenu'><a href="">About</a>
		<ul class="submenu">
			<li><a href="">Company</a></li>
			<li><a href="">Team</a></li>
		</ul>
	</li>
	<li><a href="">Contact</a></li>
</ul>

CSS

body {
	font-family: 'Roboto', sans-serif;
}

.menu {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
}

.has-submenu {
	position: relative;
}

.submenu {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: absolute;
	display: none;
	left: 0;
  top: 100%;
	/* background-color: #eee; */
	border-radius: 4px;
}

.has-submenu:hover .submenu {
	display: block;
}

.menu li {
	padding: 8px 0;
	border-radius: 4px;
}

.menu li a {
	padding: 8px 16px;
	
	text-decoration: none;
	color: #333;
}

.menu li:hover {
	background-color: #eee;
}