导航菜单框架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 οnmοuseοver="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 οnmοuseοver="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 οnmοuseοver="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 οnmοuseοver="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 οnmοuseοver="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>