水平和垂直方向的三级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 >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);