我有这个 HTML 代码：
<!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>
和CSS代码：
.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;}
我希望制作一个 javascript 文件，当悬停在主菜单上时，它会创建一个弹跳来显示子菜单，显示子菜单和返回子菜单时有 160 毫秒的延迟，它只会缓和到顶部600 毫秒的延迟才缓和下来。