这种方式把内容和行为混合在了一起，不是很满意，大家凑合用吧。
外观：
全部代码：
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>JS+CSS菜单示例</title>
<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;
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 onmouseover="showMenu('han',true)" onmouseout="showMenu('han',false)"><a href="#">汉朝</a>
<ul id="han">
<li><a href="#">卫青</a></li>
<li><a href="#">霍去病</a></li>
<li><a href="#">班超</a></li>
<li><a href="#">陈汤</a></li>
</ul>
</li>
<li onmouseover="showMenu('jin',true)" onmouseout="showMenu('jin',false)"><a href="#">晋朝</a>
<ul id="jin">
<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 onmouseover="showMenu('tang',true)" onmouseout="showMenu('tang',false)"><a href="#">唐朝</a>
<ul id="tang">
<li><a href="#">李世民</a></li>
<li><a href="#">李白</a></li>
<li><a href="#">杜甫</a></li>
<li><a href="#">狄仁杰</a></li>
</ul>
</li>
<li onmouseover="showMenu('song',true)" onmouseout="showMenu('song',false)"><a href="#">宋朝</a>
<ul id="song">
<li><a href="#">岳飞</a></li>
<li><a href="#">辛弃疾</a></li>
<li><a href="#">苏轼</a></li>
</ul>
</li>
<li onmouseover="showMenu('ming',true)" onmouseout="showMenu('ming',false)"><a href="#">明朝</a>
<ul id="ming">
<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";
}
}
//-->
</SCRIPT>
其实关键是showMenu这个函数，其他没什么。
全部代码下载：
http://www.blogjava.net/Files/heyang/JSCSSPopupmenu20090821133746.rar