使用for if else语句做导航下拉菜单
导航菜单框架css样式
<style type="text/css">
<!--
body, td, th {font-size: 12px;margin:30px;padding:0;}
a {color:#000000;text-decoration:none;}
a:hover {color:#FF0000;}
ul, li {margin:0;padding:0;}
ul, li {list-style:none;}
.nav {width:600px;height:30px;line-height:30px;background:#999933;margin:0 auto;}
.nav ul {margin-left:50px;position:absolute;}
.nav ul li {float:left;display:block;width:100px;text-align:center;background:#CCCC99;font-size:13px;margin-right:2px;height:30px;line-height:30px;
position:relative;}
.subnav {width:100px;position:absolute;top:30px;left:-50px;z-index:-1; border:1px solid #666633;}
-->
</style>
// js语句判断,写在<head></head>之间! <script language="javascript" type="text/javascript"> var $ = function(id){return document.getElementById(id)} function menu(i,length,idname) { for(var j=0;j<length;j=j+1) { if (i==j) { $(idname+j).style.display='block'; } else { $(idname+j).style.display='none'; } } } </script>
导航菜单框架
<div class="nav">
<ul>
<li onmouseover="menu(0,5,'menuList')">
<ul class="subnav" id="menuList0" style="display:none">
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单一</a> </li>
<li onmouseover="menu(1,5,'menuList')">
<ul class="subnav" id="menuList1" style="display:none">
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单二</a> </li>
<li onmouseover="menu(2,5,'menuList')">
<ul class="subnav" id="menuList2" style="display:none">
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单三</a> </li>
<li onmouseover="menu(3,5,'menuList')">
<ul class="subnav" id="menuList3" style="display:none">
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单四</a> </li>
<li onmouseover="menu(4,5,'menuList')">
<ul class="subnav" id="menuList4" style="display:none">
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单五</a> </li>
</ul>
</div>