使用javascript製作一個menu效果

特效介紹:
當鼠標劃過某個鏈接的時候展開一個下拉菜單供選擇:
菜單描述:
[code] <ul id="haulMenu_menu">
<li><a href="#" class="cBlack">點評</a>
<ul>
<li><a href="">呵呵</a></li>
<li><a href="#">呵呵呵</a></li>
<li><a href="#">呵呵呵呵</a></li>
<li><a href="#">呵呵呵呵呵</a></li>
<li><a href="#">呵呵呵呵呵呵</a></li>
</ul>
</li>
</ul>[/code]
IE6下的腳本控制，否則IE6下不好用:
[code]function buildEventsForIE() {
//IE6 can't handle css menu. this adds mouse events for IE6.
majVer = navigator.appVersion.charAt(navigator.appVersion.indexOf('MSIE ')+5);
if (majVer>=6) {
navRoot = document.getElementById("haulMenu_menu");
stuff="";
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.οnmοuseοver=function() {
this.children[1].style.display = "block";
}
node.οnmοuseοut=function() {
this.children[1].style.display = "none";
}

subNode = node.childNodes[2].childNodes;
for (x=0; x<subNode.length; x++) {
if (subNode[x].children[1] &&
subNode[x].children[1].nodeName=="ul") {
// find nested lists
subNode[x].οnmοuseοver=function() {
this.children[1].style.display = "block";
}
subNode[x].οnmοuseοut=function() {
this.children[1].style.display = "none";
}
}
}
}
}
//CSS tweaks
document.write("<style type='text/css'>");
document.write("#haulMenu ul ul {top: 20px
!important; top:18px; margin-left: 22px;}");
document.write("#haulMenu ul ul ul {top: -1px;}");
document.write("</style>");
}
}
if (document.all) buildEventsForIE();[/code]
CSS樣式:
[code]<style>
body { text-align:center;margin:0;padding:0; background: #FFF; font-size:12px;
color:#000;}
/*鏈接顏色*/
a:link {color: #000; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
/* 下拉菜單 */
.haulMenu{float:left;width:40px; background:url(i4_1.gif) 0 10px no-repeat;}
.haulMenu ul { margin:0; padding:0; }
.haulMenu ul li {list-style-type:none; margin:0; width:40px;
position: relative; }/*修改子菜單*/
.haulMenu li a {display: block;}
.haulMenu .s1{ padding:3px 0 0 !important;padding:5px 0 0;}
.haulMenu ul ul {background: #ecf3f9; border:1px solid #b2b2b2;
width:38px;position: relative; }
/* function */
.haulMenu ul li ul li a{display:block; padding:0 0 !important;}
.haulMenu ul li ul li a:hover{background:#1f3a87; color:#fff;}
.haulMenu ul li:hover > ul {display: block;}
.haulMenu ul ul {display: none; position: absolute; }/*修改子菜單*/
</style>[/code]