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