JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gHdr">
	<div class="gMain">
		<div class="gHolder">
			<div class="gLogo">
				<a href="http://www.site.com" title="Site">Site</a>
			</div>
			<nav class="gNav" id="gNav-primary-nav">
				<ul class="nav-primary">
					<li>
						<a href="http://www.site.com">Home</a>
					</li>
					<li>
						<a href="http://www.site.com">Find Tips</a>
					</li>
					<li>
						<a href="javascript:void(0);" class="toggle">Shop</a>
						<ul class="submenu">
							<li><a href="http://www.site.com">View Packages</a></li>
							<li><a href="http://www.site.com">Accessories</a></li>
						</ul>
					</li>
					<li>
						<a href="javascript:void(0);" class="toggle">My Account</a>
						<ul class="submenu">
							<li><a href="http://www.site.com">Sign in</a></li>
							<li><a href="http://www.site.com">Join</a></li>
						</ul>
					</li>
					<li>
						<a href="http://www.site.com">Help &amp; Support</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
	<div class="gBuffer"></div>
</div>

CSS

.gHdr {
background-color: #FFF;
height: 70px;
font-size: 1.5rem;
width: 100%;
}
.gHdr>.gMain {
background-color: #0078D7;
height: 70px;
position: relative;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
width: 100%;
z-index: 998;
-webkit-transform: translateZ(0);
}
.gHdr>.gMain>.gHolder {
width: 980px;
margin: 0 auto;
font-family: Segoe UI, Verdana, sans-serif;
font-weight: 400;
}

.gHdr>.gMain>.gHolder>.gLogo {
position: relative;
display: inline-block;
line-height: normal;
overflow: hidden;
float: left;
margin: 13px 0;
margin-left: 20px;
font-family: 'Ubuntu', sans-serif;
border-right: 1px solid rgba(250,250,250,0.6);
padding: 6px 0;
padding-right: 25px;
}
.gHdr>.gMain>.gHolder>.gLogo>a {
width: 72px;
height: 31px;
margin: 0;
display: inline-block;
font-size: 28px;
alignment-baseline: auto;
margin-top: 0;
color: #FFF;
text-decoration: none;
}


.gHdr>.gMain>.gHolder>nav#gNav-primary-nav {
position: relative;
display: inline-block;
line-height: normal;
max-width: 998px;
margin-left: 26px;
height: 70px;
font-size: 16px;
}
.gHdr>.gMain>.gHolder>nav#gNav-primary-nav>.nav-primary {
}
.gHdr>.gMain>.gHolder>nav#gNav-primary-nav>.nav-primary>li {
display: inline-block;
position: relative;
line-height: normal;
float: left;
}
.gHdr>.gMain>.gHolder>nav#gNav-primary-nav>.nav-primary>li>a {
color: #FFF;
text-decoration: none;
padding: 21px 23px 23px 23px;
margin: 0px;
line-height: 26px;
display: inline-block;
-webkit-transition: background-color ease-out 0.3s;      transition: background-color ease-out 0.3s;
}
.gHdr>.gMain>.gHolder>nav#gNav-primary-nav>.nav-primary>li>a:hover {
background-color: #006cc1;
}
.gHdr>.gMain>.gHolder>nav#gNav-primary-nav>.nav-primary>li>a.active {
background-color: rgba(0, 0, 0, 0.3);
font-weight: 400;
}
.gHdr>.gMain>.gHolder>nav#gNav-primary-nav>.nav-primary>li>a.nActive {
background-color: #0060ac;
}
.gHdr>.gMain>.gHolder>nav#gNav-primary-nav>.nav-primary>li>ul {
background-color: #0060ac;
padding: 10px 0;
width: auto;
display: none;
min-width:...

JavaScript

$(document).ready(function () {    
    $(".toggle").on('click', function(e){
        e.preventDefault();
        
        //deactivate
        $(".toggle.active").next().toggle();
        $(".toggle.active").toggleClass("active");        
        
        $(this).toggleClass("active");
        $(this).next().toggle();
    });    
    
    $(".submenu").on("mouseout", function (e) {
        $(this).toggle();
        $(this).prev().toggleClass("active");
    });       
});