JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container ie-dropdown-fix">

	<!-- Header -->
	<div id="header">

		<!-- Logo -->
		<div class="eight columns">
			<div id="logo">
				<a href="index.html"><img src="images/logo.png" alt="logo"></a>
				<div id="tagline">It's time to impress your visitors!</div>
				<div class="clear"></div>
			</div>
		</div>

		<!-- Social / Contact -->
		<div class="eight columns">
			
			<!-- Social Icons -->
			<ul class="social-icons">
				<li class="facebook"><a href="#">Facebook</a></li>
				<li class="twitter"><a href="#">Twitter</a></li>
				<li class="dribbble"><a href="#">Dribbble</a></li>
				<li class="linkedin"><a href="#">LinkedIn</a></li>
				<li class="pintrest"><a href="#">Pintrest</a></li>
			</ul>
			
			<div class="clear"></div>
			
			<!-- Contact Details -->
			<div id="contact-details">
				<ul>
					<li><i class="mini-ico-envelope"></i><a href="#">[email protected]</a></li>
					<li><i class="mini-ico-user"></i>+48 880 450 120</li>
				</ul>
			</div>

		</div>

	</div>
	<!-- Header / End -->
	
	<!-- Navigation -->
	<div class="sixteen columns">

		<div id="navigation">
			<ul id="nav">

				<li><a href="index.html">Home</a></li>

				<li class=""><a href="#">Features</a>
					<ul style="display: none;">
					<li><a href="full_width.html">Full Width</a></li>
					<li><a href="about.html">About Us</a></li>
					<li><a href="services.html">Services</a></li>
					<li><a href="pricing_tables.html">Pricing Tables</a></li>

					<li><a href="#">Page Templates</a>
						<ul>
							<li><a href="sidebar_right.html">Sidebar Right</a></li>
							<li><a href="sidebar_left.html">Sidebar Left</a></li>
							<li><a href="blog_post.html">Single Post</a></li>
							<li><a href="single_project.html">Single Project</a></li>
						</ul>
					</li>
					</ul>
				</li>

				<li><a href="shortcodes.html">Shortcodes</a></li>

				<li class=""><a href="#">Portfolio</a>
					<ul style="display: none;">
						<li><a href="portfolio_2.html">2...

CSS

/* Main Navigation
====================================*/
.selectnav {
  display: none;
  cursor: pointer;
  width: 100%;
  padding: 8px;
  height: 37px;
  float: left;
  font-size: 14px;
  margin: 15px 0;
}

#navigation {
background: #303030;    
/*background: -moz-linear-gradient(center top , rgb(59, 59, 59) 1%, rgb(59, 59, 59) 50%, rgb(10, 14, 10) 51%, rgb(10, 8, 9) 100%) repeat scroll 0% 0% transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 3px 3px 0px 0px;*/
  /*background: #303030;*/
  display: block;
  width: 100%;
  float: left;
  max-height: 52px;
  margin: 0 0 15px 0;
}

#navigation ul,
#navigation li {
  list-style:none;
  padding:0;
  margin:0;
  display:inline;
}
#navigation ul li{
  float:left;
  position:relative;
}

#navigation ul li a { 
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  padding: 17px 25px;
  background: url(../images/navigation-divider.png) no-repeat right 50%;
}

#navigation ul li a:hover {
  background: #72b626;
  color: #fff;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;

}

#navigation ul ul {
  position: absolute;
  display: none;
  top: 51px;
  left: 0;
  background: #303030;
  z-index: 999;
}

#navigation ul ul li a {color: #aaa;}
#navigation ul ul li a:hover {
  color: #fff;
}

#navigation ul ul li a {
  display: block;
  width: 150px;
  margin: 0;
  padding: 9px 18px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 12px;
  border-bottom: 1px solid #404040;
  background: none;
}

#navigation ul ul ul { 
  position: absolute; 
  top:0px; 
  left:100%; 
  z-index: 999;
}

#navigation ul ul ul li a { 
  border-bottom: 1px solid #404040 !important;
  border-top: 1px solid transparent;
  background: none;
}

#navigation ul ul li:last-child a, #navigation ul ul...

JavaScript

(function() {

		var $mainNav    = $('#navigation').children('ul');

		$mainNav.on('mouseenter', 'li', function() {
			var $this    = $(this),
				$subMenu = $this.children('ul');
			if( $subMenu.length ) $this.addClass('hover');
			$subMenu.hide().stop(true, true).slideDown('fast');
		}).on('mouseleave', 'li', function() {
			$(this).removeClass('hover').children('ul').stop(true, true).slideUp('fast');
           
		});
		
	})();