JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a>
					<ul>
						<li><a href="#">About 1</a>
							<ul>
								<li><a href="#">Sub Menu 2</a></li>
								<li><a href="#">Sub Menu 2</a></li>
								<li><a href="#">Sub Menu 2</a></li>
								<li><a href="#">Sub Menu 2</a></li>
							</ul>
						</li>
						<li><a href="#">About 2</a></li>
						<li><a href="#">About 3</a></li>
						<li><a href="#">About 4</a></li>
					</ul>
				</li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Media</a></li>
				<li><a href="#">Press</a></li>
				<li><a href="#">Contact Us</a></li>
				<li><a href="#">Buy</a></li>
			</ul>
		</nav>

CSS

nav {
	width: 800px;
	margin: 100px auto;
}

nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}

nav ul {
	background: #fff;
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 10px;
	border-radius: 5px;  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #e1e1e1;
	}
		nav ul li:hover a {
			color: #fff;
		}
	
	nav ul li a {
		display: block; padding: 15px 18px;
		color: #757575; text-decoration: none;
	}

nav ul ul {
	background: #e1e1e1; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 1px solid #cbcbcb;
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 30px;
			color: #757575;
		}	
			nav ul ul li a:hover {
				background: #757575;
			}



nav ul ul ul {
	position: absolute; left: 100%; top:0;
}