二级级联下拉导航菜单

作者：简简单单 2009-09-08

提示：您可以先修改部分代码再运行

二级级联下拉导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>二级级联下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
body,td,th{
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 12px;
	color: #333333;
}
body{
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a{
	color: #333333;
	text-decoration: none;
}
a:hover{
	color: #FF0000;
	text-decoration: none;
}
a:active{
	color: #FF0000;
	text-decoration: none;
}
#menu{
	
	margin-top:8px; background-color:#990000;
}
#menu ul{
	margin:auto;  
	list-style-type:none; padding:0px; margin-top:0px; margin-bottom:0px;
}
.m_li{
	float:left;  line-  text-align:center; margin-right:-2px; margin-left:-2px;
}
.m_li a{
	display:block; color:#FFFFFF; 
}
.m_line{
	float:left;  
	line-/*ff下有效(图片垂直居中)*/
}
.m_line img{
	margin-top:expression(( 32 - this.height ) / 2);/*ie下有效(图片垂直居中)*/
}
.m_li_a{
	float:left;  line- text-align:center; padding-top:3px; font-weight:bold;
	background-image:url(http://www.zzsky.cn/effect/images/200909051030/menu_bg.jpg); position:relative;  margin-top:-3px; margin-right:-2px; margin-left:-2px;
}
.m_li_a a{
	display:block; color:#FF0000; 
}
.smenu{
	 margin:0px auto 0px auto; padding:0px; list-style-type:none; 
}
.s_li{
	line- width:auto; display:none;  
}
.s_li_a{
	line- width:auto; display:block;  
}
</style>
<script language="javascript">
//初始化
var def="1";
function mover(object){
  //主菜单
  var mm=document.getElementById("m_"+object);
  mm.className="m_li_a";
  //初始主菜单隐藏效果
  if(def!=0){
    var mdef=document.getElementById("m_"+def);
    mdef.className="m_li";
  }
  //子菜单
  var ss=document.getElementById("s_"+object);
  ss.style.display="block";
  //初始子菜单隐藏效果
  if(def!=0){
    var sdef=document.getElementById("s_"+def);
    sdef.style.display="none";
  }
}
function mout(object){
  //主菜单
  var mm=document.getElementById("m_"+object);
  mm.className="m_li";
  //初始主菜单
  if(def!=0){
    var mdef=document.getElementById("m_"+def);
    mdef.className="m_li_a";
  }
  //子菜单
  var ss=document.getElementById("s_"+object);
  ss.style.display="none";
  //初始子菜单
  if(def!=0){
    var sdef=document.getElementById("s_"+def);
    sdef.style.display="block";
  }
}
</script>
</head>
<body>

<div id="menu">
  <ul>
    <li class="m_line"><img src="http://www.zzsky.cn/effect/images/200909051030/line.gif"></li>
    <li id="m_1" class="m_li_a"><a href="#">财税首页</a></li>
    <li class="m_line"><img src="http://www.zzsky.cn/effect/images/200909051030/line.gif"></li>
    <li id="m_2" class="m_li" onmouseover="mover(2);" onmouseout="mout(2);"><a href="#">政务公开</a></li>
    <li class="m_line"><img src="http://www.zzsky.cn/effect/images/200909051030/line.gif"></li>
    <li id="m_3" class="m_li" onmouseover="mover(3);" onmouseout="mout(3);"><a href="#">网上办事</a></li>
    <li class="m_line"><img src="http://www.zzsky.cn/effect/images/200909051030/line.gif"></li>
    <li id="m_4" class="m_li" onmouseover="mover(4);" onmouseout="mout(4);"><a href="#">公告中心</a></li>
    <li class="m_line"><img src="http://www.zzsky.cn/effect/images/200909051030/line.gif"></li>
    <li id="m_5" class="m_li" onmouseover="mover(5);" onmouseout="mout(5);"><a href="#">法规中心</a></li>
    <li class="m_line"><img src="http://www.zzsky.cn/effect/images/200909051030/line.gif"></li>
    <li id="m_6" class="m_li" onmouseover="mover(6);" onmouseout="mout(6);"><a href="#">财税文化</a></li>
    <li class="m_line"><img src="http://www.zzsky.cn/effect/images/200909051030/line.gif"></li>
    <li id="m_7" class="m_li" onmouseover="mover(7);" onmouseout="mout(7);"><a href="#">专题宣传</a></li>
    <li class="m_line"><img src="http://www.zzsky.cn/effect/images/200909051030/line.gif"></li>
  </ul>
</div>
<div style=" background-color:#F1F1F1;">
  <ul class="smenu">
    <li style="padding-left:29px;" id="s_1" class="s_li_a">欢迎光临本站！</li>
    <li style="padding-left:141px;" id="s_2" class="s_li" onmouseover="mover(2);" onmouseout="mout(2);"><a href="#">财税简介</a>  |  <a href="#">机构设置</a>  |  <a href="#">办事指南</a>  |  <a href="#">税种简介</a>  |  <a href="#">财税动态</a>  |  <a href="#">网页特效</a></li>
    <li style="padding-left:252px;" id="s_3" class="s_li" onmouseover="mover(3);" onmouseout="mout(3);"><a href="#">下载专区</a>  |  <a href="#">上传专区</a>  |  <a href="#">申请报名</a>  |  <a href="#">查询系统</a>  |  <a href="#">咨询投诉</a>  |  <a href="#">满意调查</a></li>
    <li style="padding-left:362px;" id="s_4" class="s_li" onmouseover="mover(4);" onmouseout="mout(4);"><a href="#">最新公告</a>  |  <a href="#">会计通知</a></li>
    <li style="padding-left:474px;" id="s_5" class="s_li" onmouseover="mover(5);" onmouseout="mout(5);"><a href="#">最新政策</a>  |  <a href="#">政策法规查询</a></li>
    <li style="padding-left:447px;" id="s_6" class="s_li" onmouseover="mover(6);" onmouseout="mout(6);"><a href="#">税收宣传</a>  |  <a href="#">最新更新</a>  |  <a href="#">文明创建</a>  |  <a href="#" target="_blank">青年论坛</a>  |  <a href="#">廉政课堂</a></li>
    <li style="padding-left:696px;" id="s_7" class="s_li" onmouseover="mover(7);" onmouseout="mout(7);"><a href="#">专题宣传区</a></li>
  </ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

二级级联下拉导航菜单

相关文章

精彩推荐