JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="main-menu right" role="navigation">
		<ul class="top-menu">
			<li><a href="#nowhere" title="Home">Home</a></li>
			<li><a href="page-template.html" title="Test">Test</a></li>
			<li class="hover"><h3>Test</h3>
				<ul class="submenu">
					<li><a href="#nowhere" title="Test">Test</a></li>
					<li><a href="#nowhere" title="Test">Test</a></li>
					<li><a href="#nowhere" title="Test">Test</a></li>
					<li><a href="#nowhere" title="Test">Test</a></li>
				</ul>
			</li>
			<li><a href="#nowhere" title="Test">Test</a></li>
			<li><a href="#nowhere" title="Test">Test</a></li>
			<li><a href="#nowhere" title="Test">Test</a></li>
		</ul><!-- /#nav  -->

CSS

.main-menu {
position: absolute;
top:90px;
right:0px;
text-align: right;
 z-index: 2000;
}

.main-menu ul {
width: 50%;
background-color: #333;
 display: inline;
margin: 0;
padding: 20px 5px;
list-style: none;
color: #fff;
}
.main-menu ul li {
display: inline-block;
margin-right: -10px;
position: relative;
padding: 17px 15px;
cursor: pointer;
color: #fff;
font-size: 14px;
font-weight: 700;
 }
.main-menu ul li a {
color: #fff;
border: none;
}
.main-menu ul li a:hover {
color: #f1c40f;
}
/* sub menu */
.main-menu ul li ul {
position: absolute;
top: 25px;
left: 0;
min-width: 150px;
opacity: 0;
margin: 10px 0px;
padding: 17px 5px 0px 5px;
visibility: hidden;
text-align: left;
}
.main-menu ul li ul li {
display: block;
color: #fff;
margin: 0px -5px;
}
.main-menu ul li ul li:hover {
background: #666;
color: #f1c40f;
}

.main-menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}