水平方向的PopMenu-快顯功能表（DIV+CSS+JS）

此POPMENU根據alistapart 的articles改編，比DW中用顯示、隱藏層的方法要簡單。在IE6.0 IE5.X Firefox NS都能正確顯示，只用到很少的JS代碼，使用時只要把<ul></ul>部分插入需要的地方即可，不會因解析度不同而發生錯位的現象。菜單示範>>

CSS代碼
li ul {display: none;left: -40px;position: absolute;top: 24px;width: 490px; /*opera需要這個寬度，可根據導航條的實際寬度作調整*/}li ul li{display: inline;}li ul li a{background: url(h_line.gif) no-repeat 0px 7px;color: #666666;font-weight: normal;padding: 6px;text-align: left;}li ul li a:hover{background: url(h_line.gif) no-repeat 0px 7px;color: #DC4E1B;text-decoration: underline;}li ul,li ul li{border: 0px;}li:hover ul, li.over ul,ul li:hover {display: block;}ul {list-style: none;margin: 0px;padding: 0px;font: normal 11px verdana;}ul li {border: solid 1px #CCCCCC;border-left: 0px;float: left;position: relative;}ul li a {background: #F5F5F5;color: #666666;display: block;font-weight: bold;padding: 5px 10px;text-align: center;text-decoration: none;}ul li a:hover {background: #DC4E1B;color: #FFFFFF;}.left{height: 24px;width: 1px;}

<ul id="nav"><li class="left"></li><li><a href="#">Home</a></li> <li><a href="#">About</a><ul> <li><a href="#">Sub menu 21</a></li><li><a href="#">Sub menu 22</a></li> <li><a href="#">Sub menu 23</a></li><li><a href="#">Sub menu 24</a></li> </ul></li> <li><a href="#">Products</a><ul><li><a href="#">Sub menu 31</a></li> <li><a href="#">Sub menu 32</a></li> <li><a href="#">Sub menu 33</a></li> <li><a href="#">Sub menu 34</a></li></ul> </li> <li><a href="#">Services</a><li><a href="#">Contact Us</a></li></ul>

js代碼

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;