JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://uppercanadamall.com/wp-content/themes/ucm/assets/js/jquery-accessibleMegaMenu.js"></script>
<div class="menu-primary-menu-container"><ul id="menu-primary-menu" class="nav navbar-nav pull-right"><li id="menu-item-346" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-346"><a href="http://staging.sgggfsi.flywheelsites.com/">Home</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current-menu-ancestor current-menu-parent menu-item-has-children menu-item-34 active-menu-section"><a href="/about-us-overview/">About Us (sub-menu)</a>
<ul class="sub-menu">
	<li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-53"><a href="/about-us-overview/">Overview</a></li>
	<li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54"><a href="/our-team/">Our Team</a></li>
	<li id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-55"><a href="/industry-leadership/">Industry Leadership</a></li>
</ul>
</li>
<li id="menu-item-33" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-33"><a href="/our-services/">Our Services (sub-menu)</a>
<ul class="sub-menu">
	<li id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50"><a href="/our-services/">Overview</a></li>
	<li id="menu-item-370" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-370"><a href="http://staging.sgggfsi.flywheelsites.com/our-services/fund-valuation-service/">Fund Valuation</a></li>
	<li id="menu-item-373" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-373"><a...

CSS

.navbar-nav {
  display: flex;
}
.navbar-nav > li > a {
      display: inline-block;
      display: flex;
}
ul {
  list-style-type: none;
  padding-left: 0;
}
a {
  padding: 0 5px;
 
}
.sub-menu {
    margin-left: 0;
    padding-left: 0;
    visibility: hidden;
    opacity: 0;
    position: absolute;
}
.navbar-nav .sub-menu.open {
	display: block;
	opacity: 1;
	visibility: visible;
}

a:focus {
	outline: thin dotted;
	// WebKit
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
	.button {
		outline: thin dotted;
		// WebKit
		outline: 7px auto -webkit-focus-ring-color;
		outline-offset: -2px;
	}
}

JavaScript

(function ($) {
	$(document).ready(function () {

		var key_count = 0;
		$(window).keyup(function (e) {
			key_count++;

			var code = (e.keyCode ? e.keyCode : e.which);
			var focused = $(':focus');

			if (code == 9) {
				$('body').addClass('aoda');
			}
		});

		$('.menu-primary-menu-container').accessibleMegaMenu();

		setTimeout(function () {
			$('body').removeClass('init');
		}, 500);

		$(".menu-primary-menu-container").accessibleMegaMenu({
			/* prefix for generated unique id attributes, which are required
			   to indicate aria-owns, aria-controls and aria-labelledby */
			uuidPrefix: "accessible-megamenu",

			/* css class used to define the megamenu styling */
			menuClass: "navbar-nav",

			/* css class for a top-level navigation item in the megamenu */
			topNavItemClass: "menu-item-has-children",

			/* css class for a megamenu panel */
			panelClass: "sub-menu",

			/* css class for the hover state */
			hoverClass: "hover",

			/* css class for the focus state */
			focusClass: "focus",

			/* css class for the open state */
			openClass: "open"
		});

	});
})(jQuery);