JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="main">
	<div class="mw">
		<div class="menu-main-menu-container">
		    <ul id="root-menu">
		        <li><a href="#">Item 1</a></li>
		        <li><a href="#">Item 2</a></li>
		        <li><a href="#">Item 3</a></li>
		        <li><a href="#">Item 4</a>
		        	<ul class="sub-menu">
		        		<li><a href="#">Sub 1</a></li>
		        		<li><a href="#">Sub 2</a></li>
		        		<li><a href="#">Sub 3</a></li>
		        		<li><a href="#">Sub 4</a></li>
		        	</ul>
		        </li>
		   </ul>
		</div>					
	</div>
</nav>

CSS

/* main nav */
nav#main {
	height: 40px;
	background: #fff;
	-webkit-box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.2);
	box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.2);	
	position: relative;
}
#root-menu {
    z-index: 999;
}
nav#main ul li {
	float: left;
	position: relative;
	display: block;
	height: 28px;
	padding: 12px 20px 0;
	font-size: 0.8em;
	background: url( img/nav-pipe.gif ) no-repeat right bottom;
}
nav#main li:first-child {
	padding-left: 0px;
}
nav#main a {
	color: #6c6c6c;
	font-weight: bold;
}
nav#main a:hover,
nav#main li.active-menu-item a {
	color: #efa933;
}
/* dropdowns */
nav#main li:hover ul.sub-menu {
	display: block;
}
nav#main ul.sub-menu {
	position: absolute;
	left: 0px;
	top: 40px;
	background: #fff;
	padding: 10px 10px 0;
	-webkit-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
	z-index: -1;
}
nav#main ul.sub-menu li {
	float: none;
	background: none;
	width: 140px;
	padding: 0px;
}