JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
	<title>Document</title>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<body>

<div class="container">
	<ul id="nav">
		<li><a href="">New_Item 1</a></li>
		<li><a href="">New_Item 2</a>
			<ul>
				<li><a href="">Another_new_item 1</a></li>
				<li><a href="">Another_new_item 2</a></li>
				<li><a href="">Another_new_item 3</a></li>
				<li><a href="">Another_new_item 4</a></li>
			</ul>
		</li>
		<li><a href="">New_Item 3</a></li>
		<li><a href="">New_Item 4</a>
			<ul>
				<li><a href="">Another_new_item 1</a></li>
				<li><a href="">Another_new_item 2</a></li>
				<li><a href="">Another_new_item 3</a></li>
				<li><a href="">Another_new_item 4</a></li>
			</ul>
		</li>
		<li>
			<a href="">New_Item 5</a></li>
	</ul>
</div>
</body>

CSS

* {
	margin: 0;
	padding: 0;
}

#nav {
	margin: 50px;
}

ul li{
	float:left;
	
	width: 150px;
	list-style:none;
	
}

ul a {
	display: block;
	background: #ccc;
	padding: 5px;
	margin: 3px;
	text-align: center;
	text-decoration: none;
}

.container {
	width: 900px;
	margin: 0 auto;
}

li ul {
	display: none;
}

JavaScript

$(document).ready(function() {
		$('#nav li').hover(function() {
			$(this).children('ul').stop(false, true).fadeIn(300);
		}, function() {
			$(this).children('ul').stop(false, true).fadeOut(300);
		});
	});