JSFiddle - React, Tailwind, and code Playground

by Nikhil Mangal

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="menu-wrapper">
<ul id="menu">
	<li><a href="#">Home</a>
	<ul>
	    <li><a href="#">Sub Menu 1</a>
        	<ul>
            	<li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 1</a></li>
            </ul>
        </li>
	    <li><a href="#">Sub Menu 2</a>
        	<ul>
            	<li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 1</a></li>
            </ul>
        </li>
            <li><a href="#">Sub Menu 3</a></li>
            <li><a href="#">Sub Menu 4</a></li>
	</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>
	    <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
            <li><a href="#">Sub Menu 4</a></li>
	</ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>
</div>

CSS

#menu-wrapper
{
	
	width:100%;
	height:40px;
}
#menu
{
	margin:0px;
	padding:0px;
	list-style:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
    width:100%;
    display:table;
    
}
#menu > li
{
	
    display:table-cell;
    text-align:center;
}
#menu li a
{
	display:block;
	height:40px;
	line-height:40px;
	color:#fff;
	background:#333;
	text-decoration:none;
	padding:0px 20px;
}
#menu li a:hover
{
	background:#333;
}
#menu li li a{background:#C60;}
#menu li ul{display:none;position:absolute;list-style:none;margin:0px;padding:0px;}
#menu li ul li{float:none;}
#menu li ul ul{margin-left:110px;margin-top:-40px;min-width:180px;}

JavaScript

$(document).ready(function(){
	$('#menu li').hover(function(){
		$(this).find('ul:first').stop(true,false).slideToggle();
	});
	$('#menu li li').hover(function(){
		$(this).find('ul').slideDown();
	},function(){
		$(this).find('ul').slideUp();
		});
});