這回要比上次強(qiáng)了，有效的把內(nèi)容，形式和行為分離。
截圖：
全部代碼：
<!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="#">衛(wèi)青</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="#">徐達(dá)</a></li>
<li><a href="#">藍(lán)玉</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>
上面代碼中最重要的部分是循環(huán)中代碼放入到一個(gè)函數(shù)中，這是為了避免閉包的消極影響，使循環(huán)一次都生成一個(gè)函數(shù)實(shí)例，每個(gè)實(shí)例體針對(duì)的每個(gè)li和ul都是不同的。
全體代碼下載：
http://www.aygfsteel.com/Files/heyang/JSCSSPopupmenu20090821151741.rar