I have this HTML Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="navbar.css" type="text/css">
</head>
<body><div class="AJXCSSMenuGAbaaTB"><!-- AJXFILE:navbar.css -->
<ul class="sub">
<li><a href="http://www.gigabyte.heliohost.org/" title="Home"><b>Home</b></a></li>
<li><a class="ajxsub" href="http://www.gigabyte.heliohost.org/about" title="About Us & Contact Information"><b>About</b></a>
<ul>
<li class="sfirst slast"><a href="http://www.fb.fan.page.gigabyte.heliohost.org/" title="Like GigaByte on Facebook">Facebook Page</a></li>
</ul>
</li>
<li><a class="ajxsub" href="http://www.gigabyte.heliohost.org/tools/"><b>Tools</b></a>
<ul>
<li class="sfirst"><h1>Online</h1></li>
<li><h1>Backyard Monsters</h1></li>
<li><a href="http://www.gigabyte.heliohost.org/tools/bm-icalc/" title="Backyard Monsters Inferno Base Health Calculator">Inferno Base Health Calculator</a></li>
<li><a href="http://www.gigabyte.heliohost.org/tools/bm-calc/" title="Backyard Monsters Main Base Health Calculator">Main Base Health Calculator</a></li>
<li><a href="http://www.gigabyte.heliohost.org/tools/bm-opcalc/" title="Backyard Monsters Outpost Base Health Calculator">Outpost Base Health Calculator</a></li>
<li><a href="http://www.gigabyte.heliohost.org/tools/bmlist/" title="Update List for Backyard Monsters ">Update List</a></li>
<li><h1>War Commander</h1></li>
<li><a href="http://www.gigabyte.heliohost.org/tools/wc-calc/" title="War Commander Main Base Health Calculator">Main Base Health Calculator</a></li>
<li><a href="http://www.gigabyte.heliohost.org/tools/wclist/" title="Update List for War Commander">Update List</a></li>
<li><h1>Offline</h1></li>
<li class="slast"><a href="http://www.gigabyte.heliohost.org/tools/offdl/">Downloads</a></li>
</ul>
</li>
<li><a class="ajxsub" href="http://www.gigabyte.heliohost.org/help/" title="Help"><b>Help</b></a>
<ul>
<li class="sfirst slast"><a href="http://www.gigabyte.heliohost.org/help/faq/" title="Frequently Asked Questions">F.A.Q.</a></li>
</ul>
</li>
</ul>
<br >
</div>
</body>
</html>
and css code:
.AJXCSSMenuGAbaaTB {position:relative;margin:0 auto;z-index:100;width:590px;height:52px;text-align:center;}
.AJXCSSMenuGAbaaTB ul {position:relative;display:inline-block;margin:0;padding:0;list-style-type:none;}
* html .AJXCSSMenuGAbaaTB ul {display:inline;}
*+html .AJXCSSMenuGAbaaTB ul {display:inline;}
.AJXCSSMenuGAbaaTB li {float:left;margin:0;}
.AJXCSSMenuGAbaaTB li:hover,.AJXCSSMenuGAbaaTB .ajxover {position:relative;}
.AJXCSSMenuGAbaaTB ul ul h1 {width:184px;padding:5px 8px 5px 8px;margin:0;font:bold 14px/14px Arial,Helvetica,sans-serif;text-decoration:none;text-align:center;color:#000000;background:#ffffff;}
.AJXCSSMenuGAbaaTB ul ul .sfirst h1 {margin-top:4px;}
.AJXCSSMenuGAbaaTB a {display:block;float:left;height:52px;white-space:nowrap;overflow:hidden;padding:0 0 0 16px;font:18px/52px Arial,Helvetica,sans-serif;text-decoration:none;text-align:center;color:#ffffff;background:#3c3c3c url(navbar_files/top.gif) no-repeat top left;}
.AJXCSSMenuGAbaaTB a b {display:block;padding:0 22px 0 0;font-weight:normal;background:url(navbar_files/top.gif) no-repeat top right;}
.AJXCSSMenuGAbaaTB li:hover a,.AJXCSSMenuGAbaaTB .ajxover a {background:#ff6600 url(navbar_files/top.gif) no-repeat bottom left;}
.AJXCSSMenuGAbaaTB li:hover a b,.AJXCSSMenuGAbaaTB .ajxover a b {background:url(navbar_files/top.gif) no-repeat bottom right;}
.AJXCSSMenuGAbaaTB a.ajxsub {background:#3c3c3c url(navbar_files/top-sub.gif) no-repeat top left;}
.AJXCSSMenuGAbaaTB a.ajxsub b {background:url(navbar_files/top-sub.gif) no-repeat top right;}
.AJXCSSMenuGAbaaTB li:hover a.ajxsub,.AJXCSSMenuGAbaaTB .ajxover a.ajxsub {background:#ff6600 url(navbar_files/top-sub.gif) no-repeat bottom left;}
.AJXCSSMenuGAbaaTB li:hover a.ajxsub b,.AJXCSSMenuGAbaaTB .ajxover a.ajxsub b {background:url(navbar_files/top-sub.gif) no-repeat bottom right;}
.AJXCSSMenuGAbaaTB ul ul {position:absolute;left:-9999px;top:-9999px;width:208px;height: auto;display:inline-block;float:none;margin:0;background:#ff6600 url(navbar_files/sub-bg.gif) right center;}
.AJXCSSMenuGAbaaTB ul :hover ul,.AJXCSSMenuGAbaaTB ul .ajxover ul {left:-4px;top:52px;}
.AJXCSSMenuGAbaaTB li li {width:200px;padding:0 4px 0px 4px;}
.AJXCSSMenuGAbaaTB li li.slast {padding-bottom:4px;}
.AJXCSSMenuGAbaaTB ul ul a,.AJXCSSMenuGAbaaTB ul :hover ul a,.AJXCSSMenuGAbaaTB ul .ajxover ul a {float:none;margin:0;width:172px;height:auto;white-space:normal;padding:5px 8px 5px 20px;font:14px/14px Arial,Helvetica,sans-serif;text-decoration:none;text-align:left;border:0;color:#000000;background:#ffffff;}
.AJXCSSMenuGAbaaTB ul :hover ul .sfirst a,.AJXCSSMenuGAbaaTB ul .ajxover ul .sfirst a {margin-top:4px;}
.AJXCSSMenuGAbaaTB ul ul :hover a,.AJXCSSMenuGAbaaTB ul ul .ajxover a {background:#f1f1f1;}
.AJXCSSMenuGAbaaTB br {clear:both;height:0;font-size: 1px;line-height: 0px;}
I wish to make a javascript file that when on hover the main menu, it will create a bounce to show the submenu, 160ms delay on the showing of the submenu and the going back of the submenu, it will just ease out to the top with 600ms delay before it ease out.
If you want to be a ninja in jQuery I love this free 30 days to learn :
http://tutsplus.com/course/30-days-to-learn-jquery/
Or just read the doc : http://api.jquery.com/animate/ and for bounce
http://jqueryui.com/demos/effect/#easing
You can test it easily with tools like :
http://jsfiddle.net/ or http://jsbin.com/3/
This is a good starter kit !