JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navwrap">
  <ul>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Im Testing LONG Titles</a></li>
    <li><a href="#">Just a Test</a></li>
    <li><a href="#">Empty Test</a> 
      <ul>
        <li><a href="#">Dropdown Test</a></li>
        <li><a href="#">Long Dropdown Name</a></li>
        <li><a href="#">Another Test</a></li>
        <li><a href="#">And Another One</a></li>
        <li><a href="#">Basic Test</a></li>
      </ul>
    </li>
    <li><a href="#">Test</a></li>
  </ul>
</div>

CSS

body {
	color: #CCCCCC;
	background-color: #505050;
	margin: 50px 0px;
	padding: 0px 0px;
}

#navwrap {
	margin: 0px auto;
	padding: 5px 5px;
	background-color: #333333;
	border-bottom: 2px solid #1F1F1F;
	height: 40px;
	width: 93%;
}


#navwrap ul, li {
	display: inline;
	float: left;
	list-style-type: none;
	position: relative;
	top: 3px;
}
#navwrap ul > li > a {
	margin: 0px 5px;
	padding: 0px 10px;
	background-color: #1F1F1F;
	display: block;
	height: 40px;
	width: auto;
	min-width: 80px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
}
#navwrap ul > li > a:hover {
	background-color: #161616;
}

#navwrap ul li ul {
     display: none
}
 
#navwrap ul li:hover ul {
     display: block;
     position: absolute;
}