其实这种菜单个人认为应该称作二级，但很多朋友都习惯把它叫作三级，就顺其自然吧！在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);
Trackback: http://tb.donews.net/TrackBack.aspx?PostId=794374