使用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) { if(i==0) { $('menuList0').style.display='block'; $('menuList1').style.display='none'; $('menuList2').style.display='none'; $('menuList3').style.display='none'; $('menuList4').style.display='none'; } else if(i==1) { $('menuList0').style.display='none'; $('menuList1').style.display='block'; $('menuList2').style.display='none'; $('menuList3').style.display='none'; $('menuList4').style.display='none'; } else if(i==2) { $('menuList0').style.display='none'; $('menuList1').style.display='none'; $('menuList2').style.display='block'; $('menuList3').style.display='none'; $('menuList4').style.display='none'; } else if(i==3) { $('menuList0').style.display='none'; $('menuList1').style.display='none'; $('menuList2').style.display='none'; $('menuList3').style.display='block'; $('menuList4').style.display='none'; } else if(i==4) { $('menuList0').style.display='none'; $('menuList1').style.display='none'; $('menuList2').style.display='none'; $('menuList3').style.display='none'; $('menuList4').style.display='block'; } else { alert("输入错误!"); } } </script>
导航菜单结构
<div class="nav">
<ul>
<li onmouseover="menu(0)">
<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)">
<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)">
<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)">
<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)">
<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>