JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
					<ul class="header-nav cf">
						
						<li><a class="active" href="home.html">Home</a></li>
						<li><a href="about-us.html">About Us</a>
							<ul>
								<li><a href="about-us.html">About Us</a></li>
								<li><a href="principal-bio.html">Principal Bio</a></li>
							</ul>
						</li>
						<li><a href="services.html">Services</a></li>
						<li><a href="case-studies.html">Case Studies</a>
							<ul>
								<li><a href="case-studies.html">Case Studies</a></li>
								<li><a href="belgrave-trust.html">Belgrave Trust</a></li>
								<li><a href="social-enterprise.html">Social Enterprise</a></li>
								<li><a href="enviroment-defense-fund.html">Enviroment Defense Fund</a></li>
								<li><a href="dean-for-america.html">Dean for America</a></li>
							</ul>
						</li>
						<li><a href="clients.html">Clients</a>
							<ul>
								<li><a href="clients.html">Clients</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="media-clips.html">Media Clips</a></li>
							</ul>
						</li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
					  <a href="#" id="pull">Menu</a>
				</nav> <!-- END NAVIGATION-->

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,100);

.cf:before,
.cf:after {
	display: table;
	content: " ";
}

cf:after {
    clear: both;
}

* {
	margin: 0;
	padding: 0;
	font-family: 'Lato', Tahoma, sans-serif;
}

.full-width {
	width: 940px;
	margin: 0 auto;
}


h1,h2,h3,h4,h5,h6, p, span, a {
	font-family: 'Lato', Tahoma, sans-serif;
}

h1,h2,h3,h4,h5,h6, {
	font-weight: 100;
}

.inner-header {
	margin: 10px auto;
	height: 100px;
}

.logo {
	float: left;
}

.header-nav {
	float: right;
	margin-top: 44px;
}

#pull {
	display: none;
}

.header-nav li {
	display: inline-block;
	margin: 2px 5px;
	position: relative;
}

.header-nav a {
	color: #4c4d4f;
	text-decoration: none;
	font: 18px 'Lato', sans-serif;
	padding: 12px 10px;
}

.header-nav a.active {
	background: #4c4d4f;
	color: #fff;
}

.header-nav a:hover {
	background: #4c4d4f;
	color: #fff;
}

.header-nav ul {
	position:absolute;
	left:0;
	display: none;
	background: #fff;
	margin: 9px 0 0 0px;
	padding:0;
	z-index: 5;
	list-style:none;
	box-shadow: 0px 3px 3px rgba(0,0,0,.2);
}

.header-nav ul li{
	width: 165px;
	margin: 0px;
}

.header-nav ul li a{
	display: block;
	width: 155px!important;
	margin: 0px;
	padding: 10px 0 10px 10px;
}

.header-nav ul li:hover {
	background: #4c4d4f;
	color: #fff;
}

.slider {
	background: #fe0000;

}

.slider-inner {
	min-height: 350px; 
	position: relative;
}


.rslides {
  position: relative;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
	margin: -5px -10px 0 0;
	z-index: 99998;
  height: auto;
  position: absolute;
  width: 100%;
  border: 0;
 }

.rslides_tabs {
	list-style-type: none;
}

.rslides_tabs {
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 99999;
}

.rslides_tabs...

JavaScript

$(function() {

// START NAVIGATION
	
	
	if($(window).width() >= 560) {
		
		$('.header-nav li').hover(
			function() {
				$('ul', this).fadeIn(100);
			},
			function() {
				$('ul', this).fadeOut(100);
			}											
		);
		
	} else {
		$('#pull').click(function() {
			$('.header-nav').slideToggle(100);
		});

		$('.header-nav li').hover(
			function() {
				$('ul', this).slideDown(200).stop(true, true)
			},
			function() {
				$('ul', this).slideUp(200).stop(true, true)
			}											
		);
		$('.header-nav li a').removeClass('active');
	}
    
});