/* 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 #777777; } #aiizahh-menu ul li:last-child{ -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #aiizahh-menu ul a{ padding: 10px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } *html #aiizahh-menu ul a{ /* IE6 */ height: 10px; width: 150px; } *:first-child+html #aiizahh-menu ul a{ /* IE7 */ height: 10px; width: 150px; } #aiizahh-menu ul a:hover{ background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); } #aiizahh-menu ul li:first-child a{ -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #aiizahh-menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #FFFF00; } #aiizahh-menu ul li:first-child a:hover:after{ border-bottom-color: #04acec; } #aiizahh-menu ul li:last-child a{ -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #aiizahh-menu:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
<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>
$(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(); }) } });