JSFiddle - React, Tailwind, and code Playground

by aiizahh

HTML

<ul id="aiizahh-menu">
	<li><a href="#">Home</a></li>
	<li>
		<a href="#">Tutorial</a>
		<ul>
			<li><a href="#">CSS</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Other</a></li>
		</ul>
	</li>
	<li>
        <a href="#">Tool</a>
    		<ul>
			<li><a href="#">HTML Parse</a></li>
			<li><a href="#">Speed Test</a></li>
			<li><a href="#">Backlink Generator</a></li>
            <li><a href="#">Widget Twitter</a></li>
		</ul>
    </li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

CSS

/* Main */
#aiizahh-menu{
	width: 100%;
	margin: 0;
	padding: 10px 0 0 0;
	list-style: none;  
	background: #FE80DF;
	background: -moz-linear-gradient(#FFFF00, #FE80DF); 
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #FE80DF),color-stop(1, #FFFF00));	
	background: -webkit-linear-gradient(#FFFF00, #FE80DF);	
	background: -o-linear-gradient(#FFFF00, #FE80DF);
	background: -ms-linear-gradient(#FFFF00, #FE80DF);
	background: linear-gradient(#FFFF00, #FE80DF);
	-moz-border-radius: 50px;
	border-radius: 50px;
	-moz-box-shadow: 0 2px 1px #9c9c9c;
	-webkit-box-shadow: 0 2px 1px #9c9c9c;
	box-shadow: 0 2px 1px #9c9c9c;
}

#aiizahh-menu li{
	float: left;
	padding: 0 0 10px 0;
	position: relative;
}

#aiizahh-menu a{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #000000;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
}

#aiizahh-menu li:hover > a{
	color: #FE80DF;
}

*html #aiizahh-menu li a:hover{ /* IE6 */
	color: #FE80DF;
}

#aiizahh-menu li:hover > ul{
	display: block;
}

/* Sub-aiizahh-menu */

#aiizahh-menu ul{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #FFFF00;
    background: -moz-linear-gradient(#FFFF00, #FE80DF);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #FE80DF),color-stop(1, #FFFF00));
    background: -webkit-linear-gradient(#FFFF00, #FE80DF);    
    background: -o-linear-gradient(#FFFF00, #FE80DF);	
    background: -ms-linear-gradient(#FFFF00, #FE80DF);	
    background: linear-gradient(#FFFF00, #FE80DF);	
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#aiizahh-menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #FE80DF111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #FE80DF111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #FE80DF111, 0 2px 0...

JavaScript

$(function() {
	  if ($.browser.msie && $.browser.version.substr(0,1)<7)
	  {
		$('li').has('ul').mouseover(function(){
			$(this).children('ul').show();
			}).mouseout(function(){
			$(this).children('ul').hide();
			})
	  }
	});