JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button">THIS BUTTON SHALL TRIGGER THE A LINK BELOW TO OPEN THE MENU</button>

<div class="navbar">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">MENU</a>

<ul class="dropdown-menu" role="menu">

<li>
<a href="#">ABC</a>
</li>

<li>
<a href="#">ABC</a>
</li>

</ul>

</li>
</ul>
</div>
</div>

CSS

.collapse {
position: relative;
height: 0;
overflow: hidden;
}
.nav-collapse.collapse {
height: auto;
overflow: visible;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #ffffff;
text-decoration: none;
background-color: #0081c2;
}
.open > .dropdown-menu {
display: block;
}

JavaScript

$(document).ready(function () {
$('.dropdown-toggle').on('mouseover', function () {
$('.nav li').removeClass("open");
$(this).parent().toggleClass("open");
var height = $menu.outerHeight(); var width = $menu.outerWidth();
$('ul.' + $(this).attr("rel") + ' li > a').removeClass("maintainHover");
$('ul.' + $(this).attr("rel") + ' li > div').hide();
$('ul.' + $(this).attr("rel") + ' li:first-child > a').addClass("maintainHover");
$('ul.' + $(this).attr("rel") + ' li:first-child > div').css({
'display': 'block',
'left': width - 3,
'height': height - 4,
'top': -1
});
});
});

var $menu = $(".dropdown-menu");
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu,
});