<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{ margin: 30px 150px;font-family: Arial;font-size: 20px;}
*{margin: 0;padding: 0;list-style-type: none;}
#nav{width: 145px;background: #ccc;border: 2px solid #ccc;}
#nav li{width: 145px;line-height: 24px;border-top: 1px solid #ccc; border-bottom: 1px solid #708195; position: relative;}
.navlink{text-decoration: none;color: #ffffff;width: 115;height: 24px;padding-left: 20px; display: block;}
.menu {
width:145px;
display: none;
}
.menu li {
width:145px;
height: 22px;
border-bottom: 1px solid #708195;
background: blue;
position: relative;
}
.menulink {padding-left:50px;color:#6b7f97;text-decoration: none;}
.menulink:hover {
text-decoration: underline;
}
</style>
<script type="text/javascript">
function le(n){
var nav=document.getElementById("m"+n);
if (nav.style.display!="block") {
for (var i = 0; i <5; i++) {
document.getElementById("m"+i).style.display="none";
}
nav.style.display="block";
}else{
nav.style.display="none";
}
}
</script>
</head>
<body>
<ul id="nav">
<li><a href="#" class="navlink" οnclick="le(0)">首頁</a></li>
<ul id="m0" class="menu">
<li><a href="#" class="menulink">1</a></li>
<li><a href="#" class="menulink">2</a></li>
<li><a href="#" class="menulink">3</a></li>
<li><a href="#" class="menulink">4</a></li>
</ul>
<li><a href="#" class="navlink" οnclick="le(1)">關於</a></li>
<ul id="m1" class="menu">
<li><a href="#" class="menulink">1</a></li>
<li><a href="#" class="menulink">2</a></li>
<li><a href="#" class="menulink">3</a></li>
<li><a href="#" class="menulink">4</a></li>
</ul>
<li><a href="#" class="navlink" οnclick="le(2)">專業的</a></li>
<ul id="m2" class="menu">
<li><a href="#" class="menulink">a</a></li>
<li><a href="#" class="menulink">b</a></li>
<li><a href="#" class="menulink">c</a></li>
<li><a href="#" class="menulink">d</a></li>
</ul>
<li><a href="#" class="navlink" οnclick="le(3)">特色</a></li>
<ul id="m3" class="menu">
<li><a href="#" class="menulink">110</a></li>
<li><a href="#" class="menulink">120</a></li>
<li><a href="#" class="menulink">119</a></li>
<li><a href="#" class="menulink">911</a></li>
</ul>
<li><a href="#" class="navlink" οnclick="le(4)">特色</a></li>
<ul id="m4" class="menu">
<li><a href="#" class="menulink">110</a></li>
<li><a href="#" class="menulink">120</a></li>
<li><a href="#" class="menulink">119</a></li>
<li><a href="#" class="menulink">911</a></li>
</ul>
<li><a href="#" class="navlink" οnclick="le(5)">特色</a></li>
<ul id="m5" class="menu">
<li><a href="#" class="menulink">110</a></li>
<li><a href="#" class="menulink">120</a></li>
<li><a href="#" class="menulink">119</a></li>
<li><a href="#" class="menulink">911</a></li>
</ul>
</ul>
</body>
</html>菜單欄展開
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章