JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
			
<header>
				<select class="menu_mobile_top">
					<option>Home</option>
					<option>Services</option>
					<option>Products</option>
					<option>Shop</option>
					<option>Prices</option>
					<option>About</option>
					<option>Contact</option>
				</select>
				<nav>
					<ul class="nav">					
						<li role="presentation" class="active"><a href="#">Home</a></li>
						<li role="presentation"><a href="#">Services</a>
							<ul class="subnav">
								<li role="presentation"><a href="#">Service 1</a>
								<li role="presentation"><a href="#">Service 2</a>
								<li role="presentation"><a href="#">Service 3</a>
							</ul>
						</li>
						<li role="presentation"><a href="#">Products</a>
							<ul class="subnav">
								<li role="presentation"><a href="#">Phonak</a></li>
								<li role="presentation"><a href="#">ReSound</a></li>
								<li role="presentation"><a href="#">Siemens</a></li>
								<li role="presentation"><a href="#">Starkey</a></li>
								<li role="presentation"><a href="#">Widex</a></li>
								<li role="presentation"><a href="#">Oticon</a>
									<ul class="subnavoptions">
										<li role="presentation"><a href="#">Test1</a></li>
										<li role="presentation"><a href="#">Test 2</a></li>
									</ul>
								</li>
								<li role="presentation"><a href="#">Unitron</a></li>
								<li role="presentation"><a href="#">Bernafon</a></li>
							</ul>
						</li>
						<li role="presentation"><a href="#">Shop</a></li>
						<li role="presentation"><a href="#">Prices</a></li>
						<li role="presentation"><a href="#">About</a></li>
						<li role="presentation"><a href="#">Contact</a></li>
					</ul>
				</nav>
			</header>

CSS

body {
	font-size: 0;
	text-align: center;
	background-image: url('../images/bg.png');
	background-repeat: repeat;
	font-family: 'Montserrat', sans-serif;
}

header {
	width: 100%;
	height: 50px;
	background: #304770;
	z-index: 10;
}

h1 {
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 34pt;
}

a {
	text-decoration: none;
	color: inherit;
}

nav {
	position: relative;
	width: 100%;
	z-index: 10;
}

a:hover {
	text-decoration: none;
	color: inherit;
}

::-webkit-input-placeholder {
   color: #99C2EC;
}

:-moz-placeholder { /* Firefox 18- */
   color: #99C2EC;
}

::-moz-placeholder {  /* Firefox 19+ */
    color: #99C2EC;
}

:-ms-input-placeholder {  
    color: #99C2EC;
}

.bodyframe {
	display: inline-block;
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}

.div_container {
	max-width: 1460px;
	width: 100%;
	display: inline-block;
	margin: 0 auto;
}

.logo-div {
	padding: 15px 0 10px;
}

.logo-div div {
	display: inline-block;
	width: 50%;
	font-size: 14px;
	color: #304770;
}

.center {
	margin: 0 auto;
}

.nav-offset {
	display: inline-block;
}

.nav {
	height: 50px;
	display: block;
	position: relative;
	list-style: none;
	background: #304770;
}

.nav li {
	display: inline-block;
	background-color: #304770;
	margin: 0 5px;
	position: static;
}

.nav li a {
	padding: 12px 15px;
	font-size: 18px;
	color: #EFEFEF;
	display: block;
}

.nav li.active a {
	color: orange;
}

.nav > li.active > a:before {
	width: 100%;
}

.nav li:hover > a {
	background-color: #304770;
	color: orange;
	transition: color 0.25s;
}

.nav > li > a:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background-color: orange;
	-webkit-transition: width 0.2s;
    -moz-transition: width 0.2s;
    -o-transition: width 0.2s;
	transition: width 0.2s;
}

.nav > li:nth-last-of-type(1) > a:after {
	display: none;
}

.nav li a:hover:before {
	width: 100%;
}

.nav > li > a:after {
	content: "";
   ...

JavaScript

$(window).on('resize', function(){
				var nav_width = 0;
				$('.nav > li').each(function() {
					$(this).data("serial", nav_width);
					nav_width += $(this).outerWidth(true) + 5;
				});
			
				var win_width = $(window).width();
				if ((win_width - nav_width) < 24) {
					$('.nav').css('visibility', 'collapse');
					$('.subnav').css('visibility', 'collapse');
					$('.menu_mobile_top').css('display', 'inline-block');
				} else {
					$('.nav').css('visibility', 'visible');
					$('.subnav').css('visibility', 'visible');
					$('.menu_mobile_top').css('display', 'none');
				}
			}).resize();