JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
	<ul>
		<li class="abt"><a href="#" title="">About Us</a>
			<ul>
				<li><a href="#">Our style</a></li>
				<li><a href="#">Our mission</a></li>
			</ul>
		</li>
		<li class="col"><a href="#">Collection</a>
			<ul>
				<li class="col-a"><a href="#">2013</a>
					<ul>
						<li><a href="#">A</a></li>
						<li><a href="#">B</a></li>
					</ul>
				</li>
				<li class="col-b"><a href="#">2014</a>
					<ul>
						<li><a href="#">A</a></li>
					</ul>	
				</li>
			</ul>
		</li>
		<li class="buy"><a href="#">Good to know</a>
			<ul>
				<li class="buy-a"><a href="#">Men</a>
					<ul>
						<li><a href="#">A</a></li>
						<li><a href="#">B</a></li>
						<li><a href="#">C</a></li>
					</ul>
				</li>
				<li class="buy-b"><a href="#">Women</a>
					<ul>
						<li><a href="#">A</a></li>
					</ul>
				</li>
					<li class="buy-c"><a href="#">Kids</a>
					<ul>
						<li><a href="#">A</a></li>
					</ul>					
				</li>
			</ul>			
		</li>
</ul>
</div>

CSS

#nav{
    height:40px;
	overflow:hidden;
	list-style:none;
	}
			#nav ul {list-style:none;}
			#nav ul li {text-decoration: none;float:left;}
			#nav ul li a {
			text-transform:uppercase;
			font-size:14px;
			color:#bcbec0;
			text-decoration: none;
			padding:0 20px 3px 20px;
			}
			#nav ul li:hover > a{border-bottom: 2px solid #afb0bd;color:#383a49;}


			
			
/* 1 LEVEL DROP-DOWN MENU */
#nav ul li.abt ul {margin-left:-30px;}				
#nav ul li.col ul {margin-left:-100px;}
#nav ul li.buy ul { margin-left: -213px;}
#nav ul li.buy ul li {margin-left: 30px;}
#nav ul li ul { display:none;}
#nav ul li:hover > ul {width:100%;display:block; position:absolute; top:48px;background:#e7e8e9;}
#nav ul li:hover > ul li{ float:left;padding:10px 0 5px 0;list-style:none;}
#nav ul li:hover > ul li a {}
#nav ul li:hover > ul li a:hover {}

/* 2 LEVEL DROP-DOWN MENU */
#nav ul li ul li.col-a ul { margin-left:-50px;top:35px;}
#nav ul li ul li.col-b ul { margin-left:-100px;top:35px;}
#nav ul li ul li.buy-a ul { margin-left:-30px;top:35px;}
#nav ul li ul li.buy-b ul { margin-left:-160px;top:35px;}
#nav ul li ul li.buy-c ul { margin-left:-30px;top:35px;}
#nav ul li > ul li ul { display:none; }
#nav ul li > ul li:hover > ul {width:980px; display:block; position:absolute;background:#f1f1f2;}
#nav ul li > ul li:hover ul li {float:left;padding-top:10px; list-style:none;  }
#nav ul li > ul li:hover ul li a {}
#nav ul li > ul li:hover ul li a:hover { }