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="#">LINK2A</a>
            </li>
            <li><a href="#">LINK2B</a>
            </li>
            <li><a href="#">LINK2C</a>
            </li>
            <li><a href="#">LINK2D</a>
            </li>
        </ul>
    </li>
    <li><a href="#">LINK3</a>
    </li>
    <li><a href="#">LINK4</a>
        <ul>
            <li><a href="#">LINK4A</a>
            </li>
            <li><a href="#">LINK4B</a>
            </li>
            <li><a href="#">LINK4C</a>
            </li>
            <li><a href="#">LINK4D</a>
            </li>
            <li><a href="#">LINK4E</a>
            </li>
        </ul>
    </li>
</ul>

CSS

* { margin:0; padding:0;}

#nav a{
	width: 115px;
	height: 15px;
	text-decoration:none;
	display:block;
	font-size:12px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	text-align:center;
	color:#666666;
    border: 1px solid green;
    float: right;
	padding: 10px 5px 5px 5px;
	z-index: 2000;
}

#nav a li{
	width: 115px;
	height: 15px;
}


#nav:last-child {
	border-right: 1px solid #999999; 
}

#nav a:active, #nav a:hover, #nav a:focus {
	background: #999 ;
}
#nav li { 
	display:block;
	float:left;
}
#nav li:last-child {
	border-right: 1px solid #999999; 
}
#nav li ul { 
    display: table;
	height: 30px;
	position: absolute;
	left: -999px;
}
#nav li:hover ul {
	left: 0; 
    top: 30px; 
}
#nav li li {
    display: table-cell;
}
#nav li li a{
	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;
	z-index: 10000;
	padding: 5px 5px 10px 5px;
}