JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<ul id="menu">
	<li><a href="#">Home</a>
	<ul>
	    <li><a href="#">Sub Menu 1</a>
	    <li><a href="#">Sub Menu 2</a>
            <li><a href="#">Sub Menu 3</a>
            <li><a href="#">Sub Menu 4</a>
	</ul>
</li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">FAQ's</a>
	<ul>
	    <li><a href="#">Sub Menu 1</a>
	    <li><a href="#">Sub Menu 2</a>
            <li><a href="#">Sub Menu 3</a>
            <li><a href="#">Sub Menu 4</a>
	</ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>

CSS

#menu
{
	margin:0px;
	padding:0px;
	list-style:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}
#menu li
{
	float:left;
}
#menu li a
{
	display:block;
	height:40px;
	line-height:40px;
	color:#fff;
	background:#C60;
	text-decoration:none;
	padding:0px 20px;
}
#menu li a:hover
{
	background:#333;
}
#menu li ul{display:none;position:absolute;list-style:none;margin:0px;padding:0px;}
#menu li ul li{float:none;}

JavaScript

$(document).ready(function(){
	$('#menu li').hover(function(){
		$(this).find('ul').slideToggle();
	});
});