垂直列表导航菜单效果

公司要做一个左侧带垂直列表式的导航菜单的一个商城列表页，要求鼠标移到大类上显示出产品列表。
效果图：

然后找了一个以前用过的js代码修改了一下，结果在IE能显示出弹出产品列表效果，在FF下没有反映。
没办法，就另存了一份备份文件代码和样式，重新改了一遍，结果变成在了IE下没反映，而FF下能显示了。
又把两份文件对着修改，看具体差别在那。最后鼓捣了半天，终于搞定了。

JS代码：

<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>

CSS代码：

<style type="text/css">
*{}{margin: 0;  padding: 0;}
body{}{font-size:12px;}
h2{}{font-size:14px;height:20px;line-height:20px;padding-left:25px;margin:3px 0;}
ul.cplb {}{  margin:0 5px;  padding: 0;  list-style: none; width: 80px;}
ul.cplb li {}{ height:20px;line-height:20px; position: relative;  }
li ul.nav_lb {}{ position: absolute; left: 80px; top: 0; display: none; width:60px; 

background:#f6f6f6;border: 1px solid #ccc;z-index:9999;list-style:none;  }
/**//* Styles for Menu Items */
ul.cplb li a {}{ display: block;  text-decoration: none; color: #000; background: #fff; /**//* 

IE6 Bug */ }
/**//* Fix IE. Hide from IE Mac \*/
* html ul.nav_lb li {}{ float: left; height: 1%; }
* html ul.nav_lb li a {}{ height: 1%; }
/**//* End */
ul.cplb li a:hover {}{ color:#0d65c7; text-decoration:underline; } /**//* Hover Styles */ 
.cplb li ul.nav_lb li a {}{ display:block;padding: 0px 5px; background:#f6f6f6; } /**//* Sub Menu 

Styles */  
.cplb li:hover ul,.cplb li.over ul {}{ display: block; } /**//* The magic */

</style>

演示效果：
<script type="text/javascript"> startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; </script> <style type="text/css"> *{margin: 0; padding: 0;} body{font-size:12px;} h2{font-size:14px;height:20px;line-height:20px;padding-left:25px;margin:3px 0;} ul.cplb { margin:0 5px; padding: 0; list-style: none; 80px;} ul.cplb li { height:20px;line-height:20px; position: relative; } li ul.nav_lb { position: absolute; left: 80px; top: 0; display: none; 60px;background:#f6f6f6;border: 1px solid #ccc;z-index:9999;list-style:none; } /* Styles for Menu Items */ ul.cplb li a { display: block; text-decoration: none; color: #000; background: #fff; /* IE6 Bug */ } /* Fix IE. Hide from IE Mac \*/ * html ul.nav_lb li { float: left; height: 1%; } * html ul.nav_lb li a { height: 1%; } /* End */ ul.cplb li a:hover { color:#0d65c7; text-decoration:underline; } /* Hover Styles */ .cplb li ul.nav_lb li a { display:block;padding: 0px 5px; background:#f6f6f6; } /* Sub Menu Styles */ .cplb li:hover ul,.cplb li.over ul { display: block; } /* The magic */ </style> <h2>装修设计</h2> <ul id="nav" class="cplb"> <li><a href="#">·瓷砖</a> <ul class="nav_lb"> <li><a href="#" target="_blank">壁砖</a> </li> <li><a href="#" target="_blank">地砖</a> </li> <li><a href="#" target="_blank">马赛克</a> </li> </ul> </li> <li><a href="#">·洁具</a> <ul class="nav_lb"> <li><a href="#" target="_blank">马桶</a> </li> <li><a href="#" target="_blank">浴缸</a> </li> </ul> </li> <li><a href="#">·地板</a></li> <li><a href="#">·橱柜</a></li> <li><a href="#">·门窗</a></li> <li><a href="#">·板式家具</a></li> </ul>

提示：可以先在文本框内，根据需要修改代码后再运行