这回要比上次强了，有效的把内容，形式和行为分离。
截图：
全部代码：
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>JS+CSS菜单示例二</title>
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<style type="text/css">
<!--
#menubar ul{
margin:0;
padding:0;
list-style-type:none;
}
#menubar li{
float:left;
dispaly:block;
}
#menubar li a{
width:80px;
height:20px;
line-height: 20px;
font-size:14px;
border-right:1px solid #ffffff;
border-bottom:1px dashed #ffffff;
color:#ffffff;
text-decoration:none;
text-align:center;
font-weight:bold;
background-image:url(img/menubarBg.gif);
}
#menubar li a:hover{
color:#ffffff;
background-image:url(img/munuBarItemBG.gif);
text-decoration:underline;
}
#menubar li ul{
display:none;
margin:0;
padding:0;
list-style-type:none;
}
#menubar li ul li{
float:none;
dispaly:block;
}
#menubar li ul li a{
width:80px;
height:20px;
line-height: 20px;
font-size:14px;
border-right:1px solid #ffffff;
color:#ffffff;
text-decoration:none;
text-align:center;
font-weight:bold;
background-image:url(img/menubarBg.gif);
}
#menubar li ul li a:hover{
color:#ffffff;
background-image:url(img/munuBarItemBG.gif);
text-decoration:underline;
}
-->
</style>
</head>
<body>
弹出式菜单示例二
<div>
<ul id="menubar">
<li><a href="#">汉朝</a>
<ul>
<li><a href="#">卫青</a></li>
<li><a href="#">霍去病</a></li>
<li><a href="#">班超</a></li>
<li><a href="#">陈汤</a></li>
</ul>
</li>
<li><a href="#">晋朝</a>
<ul>
<li><a href="#">阮籍</a></li>
<li><a href="#">嵇康</a></li>
<li><a href="#">陶渊明</a></li>
<li><a href="#">王羲之</a></li>
<li><a href="#">桓温</a></li>
</ul>
</li>
<li><a href="#">唐朝</a>
<ul>
<li><a href="#">李世民</a></li>
<li><a href="#">李白</a></li>
<li><a href="#">杜甫</a></li>
<li><a href="#">狄仁杰</a></li>
</ul>
</li>
<li><a href="#">宋朝</a>
<ul>
<li><a href="#">岳飞</a></li>
<li><a href="#">辛弃疾</a></li>
<li><a href="#">苏轼</a></li>
</ul>
</li>
<li><a href="#">明朝</a>
<ul>
<li><a href="#">徐达</a></li>
<li><a href="#">蓝玉</a></li>
<li><a href="#">于谦</a></li>
<li><a href="#">戚继光</a></li>
<li><a href="#">谭伦</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
<!--
function $(id){
return document.getElementById(id);
}
function showMenu(ulId,visible){
var ul=$(ulId);
if(visible==true){
ul.style.display="block";
}
else{
ul.style.display="none";
}
}
window.onload=function(){
var menubar=$("menubar");
for(var i=0;i<menubar.childNodes.length;i++){
new function(){
var li=menubar.childNodes[i];
var subul=li.childNodes[2];
li.attachEvent('onmouseover',
function(){
subul.style.display="block";
}
);
li.attachEvent('onmouseout',
function(){
subul.style.display="none";
}
);
}
}
}
//-->
</SCRIPT>
上面代码中最重要的部分是循环中代码放入到一个函数中，这是为了避免闭包的消极影响，使循环一次都生成一个函数实例，每个实例体针对的每个li和ul都是不同的。
全体代码下载：
http://www.blogjava.net/Files/heyang/JSCSSPopupmenu20090821151741.rar