JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
<div class="logo">Logo</div>							
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
	<ul>
	<li><a href='#'>Sub Link 1</a></li>
	<li><a href='#'>Sub Link 2</a></li>
	</ul>
</li>
<li><a href='#'>Link 2</a>
	<ul>
	<li><a href='#'>Sub Link 1</a></li>
	<li><a href='#'>Sub Link 2</a></li>
	<li><a href='#'>Sub Link 3</a></li>
	<li><a href='#'>Sub Link 4</a></li>
	</ul>
</li>
<li><a href='#'>Link 3</a>
	<ul>
	<li><a href='#'>Sub Link 1</a></li>
	<li><a href='#'>Sub Link 2</a></li>
	<li><a href='#'>Sub Link 3</a></li>
	<li><a href='#'>Sub Link 4</a></li>
	</ul>
</li>
</ul>
		</div>

CSS

.header {
    width: 100%;
    background: #fff;
    color: #124191;
    font-weight: 300;
    font-size: 28px;
    height: 120px;
    display: table;
     position: fixed;
        z-index: 999999;
        opacity: 0.7;
    background: aqua;
}

.logo {
display: inline-block;
vertical-align: middle;
left:0;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
background: red;
}

 .drop_menu {
    padding:0;
    margin:0;
    list-style-type:none;
    display: table;
    z-index: 3000;
    display: table-cell;
    vertical-align: middle;
    float: right;
    
}


.drop_menu li { 
    display: table-cell;
    vertical-align: middle;
    float:left;
}
    
.drop_menu li a {
	padding:9px 20px;
	display:block;
	color:#666;
	text-decoration:none;
	font-size: 15px;
	font-weight: 400;
	text-transform: uppercase;

	
	
}

/* Submenu */
.drop_menu ul {
	position:absolute;
	left:-9999px;
	top:-9999px;
	list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
	left:0px;
	top:30px;
	background:#5FD367;
	padding:0px;
}

.drop_menu li:hover ul li a {
	padding:5px;
	display:block;
	width:168px;
	text-indent:15px;
	background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }