水平和垂直方向的三級PopMenu-快顯功能表（DIV+CSS+JS）

其實這種菜單個人認為應該稱作二級，但很多朋友都習慣把它叫作三級，就順其自然吧！在IE6.0 IE5.X Firefox1.x NS7.2 Opera8.0中都能正確顯示，只用到很少的JS代碼，使用時只要把<ul></ul>部分插入需要的地方即可。水平方向菜單示範>>  垂直方向菜單示範>>

水平方向的代碼:

CSS代碼
  #nav, #nav ul {float: left;list-style: none;line-height: 22px;background: #F9F9F9;/*--設定菜單背景色--*/font-weight: bold;padding: 0px;margin: 0px;border: solid 1px #CCCCCC;border-right: 0px;}#nav ul ul{border: solid 1px #CCCCCC;border-top: 0px;border-right: 0px;}#nav a {display: block;width: 85px;/*--主菜單寬度--*/color: #333333;text-decoration: none;text-align: center;border-right: solid 1px #CCCCCC;}#nav a:hover{color: #336666;}#nav a.selected{background: url(../img/arrow.gif) no-repeat right 50%;}#nav li {float: left;width: 85px;/*--主菜單寬度--*/}#nav li ul {position: absolute;left: -999em;width: 150px;font-weight: normal;margin: 0px;padding: 0px;}#nav li li {width: 150px;/*--子功能表寬度--*/}#nav li ul a {width: 150px;/*--子功能表寬度 for ie5.x--*/w\idth: 126px;/*--子功能表寬度 for ie6.0 FF NS OPERA--*/padding: 0px 12px;line-height: 19px;border-top: solid 1px #CCCCCC;text-align: left;}#nav li ul ul {margin: -20px 0 0 149px; /*--第3級菜單位置--*/}#nav li:hover ul ul,#nav li.sfhover ul ul{left: -999em;}#nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{left: auto;}#nav li:hover, #nav li.sfhover {background: #F5E3C0;/*--菜單hover 背景色--*/}

<ul id="nav"><li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Products</a><ul><li><a href="#">Sub Menu 31</a></li><li><a class="selected" href="#">Sub Menu 32</a><ul><li><a href="#">Sub Menu 321</a></li><li><a href="#">Sub Menu 322</a></li><li><a href="#">Sub Menu 323</a></li><li><a href="#">Sub Menu 324</a></li></ul></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><li><a href="#">Contact Us</a></li></ul>

js代碼　來自：htmldog 

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);