JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
	<li><a href="#">LINK1</a></li>
    <li><a href="#">LINK2</a>
    	<ul>
    	  <li><a href="#">LINK3</a></li>
        <li><a href="#">LINK4</a></li>
        <li><a href="#">LINK5</a></li>
        <li><a href="#">LINK6</a></li>
    	</ul></li>
    <li><a href="#">LINK7</a></li>
    <li><a href="#">LINK8</a></li>
</ul>

CSS

#nav{
	display:block;
	list-style:none;
	text-align: left;
}
#nav a{
	width: 50px;
	height: 15px;
	text-decoration:none;
	display:block;
	font-size:12px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	text-align:center;
	color:#666666;
	border-left: 1px solid #999999; 
	float:left;	
	padding: 10px 5px 5px 5px;
}
#nav a:hover, #nav a:focus {
	background: #999 ;
	color:#333;
}
#nav li { 
	height: 30px;
	display:block;
	position:relative;
	float:left;
}
#nav li ul { 
	height: 30px;
	position: absolute;
	left: -9999px;
}
#nav li:hover ul {
	left: 0;
    top: 100%;
    white-space: nowrap;
    word-spacing: -1em;
	clear: both;
}
#nav li li {
    word-spacing: normal;
    display: inline-block;
    float: none;
}
#nav li li a{
	width: 50px;
	text-decoration:none;
	display:block;
	font-size:9px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	text-align:center;
	border-left: 1px solid #999999; 
	color:#666666;
	padding: 5px 0 5px 0;
	z-index: 10000;
  vertical-align: middle;
}