這種方式把內容和行為混合在了一起，不是很滿意，大家湊合用吧。
外觀：
全部代碼：
<!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://m.tkk7.com/Files/heyang/JSCSSPopupmenu20090821133746.rar