生活随笔
收集整理的這篇文章主要介紹了
龙珠人物展开菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>龍珠人物展開菜單</title>
<style>
*{ padding:0; margin:0; list-style-type: none;}
.menus{ width:200px; margin:30px 150px; font-size:12px;}
ul ,li{ list-style:none;}
.menus h3{ height:24px; line-height:24px; font-size:14px; color:#666; background:#eee; border:1px solid #ccc; border-bottom:none; text-align:center; width:200px;}
#nav{ width:200px; background:#eee; border:1px solid #ccc; border-top:none;}
#nav li{ width:200px; line-height:24px; border-top:1px solid #999; border-bottom:1px solid #eee; position:relative;}
.nav_link{ width:170px; padding-left:30px; height:24px; line-height:24px; color:#F60; font-size:14px; display:block; text-decoration:none;}
.nav_link:hover{ color:#f00; background:#ddd;}
.menu{ width:200px; display:none;}
.menu li{ width:200px; height:22px; line-height:22px; border-bottom:1px solid #999; position:relative;}
.menulink{ padding-left:50px; color:#333; text-decoration:none; }
.menulink:hover{ color:#f00; }
.menu li a{ display:block; height:24px; line-height:24px;}
.menu li a:hover{ background:#ddd; }
</style>
<script>
function dragon(n){
var navUl=document.getElementById('m'+n);
if(navUl.style.display!='block'){
for(var i=0; i<=4; i++){
document.getElementById('m'+i).style.display = 'none';
}
navUl.style.display='block';
}
else{
navUl.style.display='none';
}
}
</script>
</head><body>
<div class="menus"><h3>龍珠人物</h3><ul id="nav"><li><a onClick="dragon(0)" class="nav_link" href="#">孫悟空</a></li><ul id="m0" class="menu"><li><a class="menulink" href="#">界王拳</a></li><li><a class="menulink" href="#">龜派氣功</a></li><li><a class="menulink" href="#">太陽拳</a></li></ul><li><a onClick="dragon(1)" class="nav_link" href="#">孫悟飯</a></li><ul id="m1" class="menu"><li><a class="menulink" href="#">龜派氣功</a></li><li><a class="menulink" href="#">魔閃光</a></li><li><a class="menulink" href="#">舞空術</a></li></ul><li><a onClick="dragon(2)" class="nav_link" href="#">貝吉塔</a></li><ul id="m2" class="menu"><li><a class="menulink" href="#">閃光彈</a></li><li><a class="menulink" href="#">連續發波</a></li><li><a class="menulink" href="#">舞空術</a></li></ul><li><a onClick="dragon(3)" class="nav_link" href="#">比克</a></li><ul id="m3" class="menu"><li><a class="menulink" href="#">魔貫光殺炮</a></li><li><a class="menulink" href="#">自我恢復</a></li><li><a class="menulink" href="#">舞空術</a></li></ul><li><a onClick="dragon(4)" class="nav_link" href="#">龜仙人</a></li><ul id="m4" class="menu"><li><a class="menulink" href="#">龜派氣功</a></li><li><a class="menulink" href="#">看MM</a></li><li><a class="menulink" href="#">流鼻血</a></li></ul></ul></div>
</body>
</html>
總結
以上是生活随笔為你收集整理的龙珠人物展开菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
