其实这种菜单个人认为应该称作二级，但很多朋友都习惯把它叫作三级，就顺其自然吧！在IE6.0 IE5.X Firefox1.x NS7.2 Opera8.0中都能正确显示，只用到很少的JS代码，使用时只要把<ul></ul>部分插入需要的地方即可。水平方向菜单演示>> 垂直方向菜单演示>>
字串9
水平方向的代码:
字串6
#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> 字串3
js代码 来自：htmldog 字串3
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);
