JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<div id="access">
<div class="menu-header">
<ul id="menu-wordpress-sandbox-menu" class="menu">
	<li id="menu-item-17" class="menu-item"><a href="#">Fruits</a>&nbsp;&nbsp;
		<ul class="sub-menu">
			<li id="menu-item-19" class="menu-item"><a href="#">Oranges</a>&nbsp;&nbsp;</li>
			<li id="menu-item-20" class="menu-item"><a href="#">Apples</a>&nbsp;&nbsp;</li>
		</ul>
	</li>
	<li id="menu-item-32" class="menu-item"><a href="#">Colors</a>&nbsp;&nbsp;
		<ul class="sub-menu">
			<li id="menu-item-30" class="menu-item"><a href="#">Blue</a>&nbsp;&nbsp;</li>
			<li id="menu-item-31" class="menu-item"><a href="#">Red</a>&nbsp;&nbsp;</li>
		</ul>
	</li>
	<li id="menu-item-33" class="menu-item"><a href="#">Links</a>&nbsp;&nbsp;
		<ul class="sub-menu">
			<li id="menu-item-34" class="menu-item"><a href="#">Google</a>&nbsp;&nbsp;</li>
			<li id="menu-item-35" class="menu-item"><a href="#">Yahoo!</a>&nbsp;&nbsp;</li>
		</ul>
	</li>
</ul>
</div>
</div>

CSS

/* =Menu
-------------------------------------------------------------- */
#access {
	background: #000;
	margin: 0 auto;
	width: 940px;
	display:block;
	float:left;
}

#access ul ul a {
	background:#333;
	height:auto;
	line-height:1em;
	width: 160px;
	background-image: -moz-linear-gradient(100% 100% 90deg, #474747, #939393);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#939393), to(#474747));
}
#access ul ul { position:absolute;left:20px;
    margin-top:0px; width: 200px; height:60px;display:block;
	background-color:#474747;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
}
#access ul ul {
	display:none;
	...
}
#access ul li:hover > ul {
	display:block;
}
#access ul li:hover > ul {
	/*display:block;*/
}
ul.menu{ 
list-style-type:none;display:inline;margin:auto;}
ul.menu li{ float:left; }

JavaScript

jQuery(document).ready(function($) {
	//initial the menus
	$("ul.menu li").mouseover(function() {
		$(this).find("ul.sub-menu").animate({"height": "show", "opacity": "show"}, 800, "swing");
 
		$(this).hover(function() {}, function(){
			$(this).find("ul.sub-menu").animate({"height": "hide", "opacity": "hide"}, "slow");
		});
	});
});