下面是和dhc差不久不多的导航成效源码,成效兼容性特别非常高,欢迎人人测试举报。
<style type="text/css">
* {
text-align:center;
font-size:12px;
margin:0px;
padding:0px
}
#div {
margin:auto;
margin-top:10px
}
#div ul li {
list-style-type:none;
float:left
}
#div ul li a {
text-decoration:none;
color:#fff;
display:block;
margin-top:3px;
background:#900
}
#div #title01,#div #title02,#div #title03,#div #title04,#div #title05,#div #title06,#div #title07 {
padding:9px 33px 9px 33px;
background:url(line.gif) no-repeat right top
}
#div #title07 {
background:url()
}
#div ul li a:hover {
margin-top:0px
}
#div ul #a1 {
margin-top:0px;
color:#F00
}
#div ul #title01 {
padding:12px 33px 9px 33px;
background:url(menu_bg.gif) no-repeat top left
}
#div_bottom {
width:799px;
height:25px;
background:url(div_bottom.gif) no-repeat top left;
position:relative
}
#div_bottom #jieshi01,#div_bottom #jieshi02,#div_bottom #jieshi03,#div_bottom #jieshi04,#div_bottom #jieshi05,#div_bottom #jieshi06,#div_bottom #jieshi07 {
display:none
}
#div_bottom #jieshi01 ul li,#div_bottom #jieshi02 ul li,#div_bottom #jieshi03 ul li,#div_bottom #jieshi04 ul li,#div_bottom #jieshi05 ul li,#div_bottom #jieshi06 ul li,#div_bottom #jieshi07 ul li {
list-style:none;
float:left;
margin-left:20px;
display:block;
padding:5px 0px 5px 0px
}
#div_bottom #jieshi01 a,#div_bottom #jieshi02 a,#div_bottom #jieshi03 a,#div_bottom #jieshi04 a,#div_bottom #jieshi05 a,#div_bottom #jieshi06 a,#div_bottom #jieshi07 a {
text-decoration:none;
color:#990000
}
#div_bottom #jieshi01 a:hover,#div_bottom #jieshi02 a:hover,#div_bottom #jieshi03 a:hover,#div_bottom #jieshi04 a:hover,#div_bottom #jieshi05 a:hover,#div_bottom #jieshi06 a:hover,#div_bottom #jieshi07 a:hover {
text-decoration:none;
color:#FF0000
}
#div_bottom #jieshi01 {
position:absolute;
left:14px;
display:block
}
#div_bottom #jieshi02 {
position:absolute;
left:128px
}
#div_bottom #jieshi03 {
position:absolute;
left:242px
}
#div_bottom #jieshi04 {
position:absolute;
left:356px
}
#div_bottom #jieshi05 {
position:absolute;
left:470px
}
#div_bottom #jieshi06 {
position:absolute;
left:240px
}
#div_bottom #jieshi07 {
position:absolute;
left:698px
}
</style>
<script language="javascript">
function over(title_who,a_who,_title_who){
for(i=1;i<=7;i++){
document.getElementById("title0"+i).style.background="url(line.gif) no-repeat right top"
document.getElementById("title0"+i).style.padding="9px 33px 9px 33px"
document.getElementById("a"+i).style.margin="3px 0px 0px 0px"
document.getElementById("a"+i).style.color="#ffffff"
}
document.getElementById(title_who).style.background="url(menu_bg.gif) no-repeat right top"
document.getElementById(title_who).style.padding="12px 33px 9px 33px"
document.getElementById(a_who).style.margin="0px"
document.getElementById(_title_who).style.background="url()"
document.getElementById(a_who).style.color="#ff0000"
if(title_who!="title07"){
document.getElementById("title07").style.background="url()"
}
}
function out(){
for(i=1;i<=7;i++){
document.getElementById("title0"+i).style.background="url(line.gif) no-repeat right top"
document.getElementById("title0"+i).style.padding="9px 33px 9px 33px"
document.getElementById("a"+i).style.margin="3px 0px 0px 0px"
document.getElementById("jieshi0"+i).style.display="none"
document.getElementById("a"+i).style.color="#ffffff"
}
document.getElementById("title01").style.background="url(menu_bg.gif) no-repeat right top"
document.getElementById("title01").style.padding="12px 33px 9px 33px"
document.getElementById("a1").style.margin="0px"
document.getElementById("title07").style.background="url()"
document.getElementById("jieshi01").style.display="block"
document.getElementById("a1").style.color="#ff0000"
}
function show_jieshi(who){
for(i=1;i<=7;i++){
document.getElementById("jieshi0"+i).style.display="none"
}
document.getElementById(who).style.display="block"
}
function hide_jieshi(who){
if(who!="jieshi01"){
document.getElementById(who).style.display="none"
}
}
var timer,timer1,timer2,timer3,timer4,timer5,timer6,timer7
function setTime(n){
if(n==1){
timer1=setTimeout(function(){hide_jieshi("jieshi01")},200)
}
if(n==2){
timer2=setTimeout(function(){hide_jieshi("jieshi02")},200)
}
if(n==3){
timer3=setTimeout(function(){hide_jieshi("jieshi03")},200)
}
if(n==4){
timer4=setTimeout(function(){hide_jieshi("jieshi04")},200)
}
if(n==5){
timer5=setTimeout(function(){hide_jieshi("jieshi05")},200)
}
if(n==6){
timer6=setTimeout(function(){hide_jieshi("jieshi06")},200)
}
if(n==7){
timer7=setTimeout(function(){hide_jieshi("jieshi07")},200)
}
}
</script>
<table cellpadding=0 cellspacing=0 border=0 align=center style="margin:auto"><tr>
<td>
<div id="div">
<ul>
<li id="lianjie01" onmouseo ver="over('title01','a1','title07');show_jieshi('jieshi01');clearTimeout(timer);clearTimeout(timer1)" onmouseo ut="setTime('1');timer=setTimeout('out()',100)"><a href="#" id="a1"><div id="title01">财税首页</div></a></li>
<li id="lianjie02" onmouseo ver="over('title02','a2','title01');show_jieshi('jieshi02');clearTimeout(timer);clearTimeout(timer2)" onmouseo ut="setTime('2');timer=setTimeout('out()',100)"><a href="#" id="a2"><div id="title02">政务公然</div></a></li>
<li id="lianjie03" onmouseo ver="over('title03','a3','title02');show_jieshi('jieshi03');clearTimeout(timer);clearTimeout(timer3)" onmouseo ut="setTime('3');timer=setTimeout('out()',100)"><a href="#" id="a3"><div id="title03">网上处事</div></a></li>
<li id="lianjie04" onmouseo ver="over('title04','a4','title03');show_jieshi('jieshi04');clearTimeout(timer);clearTimeout(timer4)" onmouseo ut="setTime('4');timer=setTimeout('out()',100)"><a href="#" id="a4"><div id="title04">关照通告中央</div></a></li>
<li id="lianjie05" onmouseo ver="over('title05','a5','title04');show_jieshi('jieshi05');clearTimeout(timer);clearTimeout(timer5)" onmouseo ut="setTime('5');timer=setTimeout('out()',100)"><a href="#" id="a5"><div id="title05">法则中央</div></a></li>
<li id="lianjie06" onmouseo ver="over('title06','a6','title05');show_jieshi('jieshi06');clearTimeout(timer);clearTimeout(timer6)" onmouseo ut="setTime('6');timer=setTimeout('out()',100)"><a href="#" id="a6"><div id="title06">财税文化</div></a></li>
<li id="lianjie07" onmouseo ver="over('title07','a7','title06');show_jieshi('jieshi07');clearTimeout(timer);clearTimeout(timer7)" onmouseo ut="setTime('7');timer=setTimeout('out()',100)"><a href="#" id="a7"><div id="title07">专题宣传</div></a></li>
</ul>
</div>
</td></tr>
<tr>
<td>
<div id="div_bottom" onmouseo ver="clearTimeout(timer)" onmouseo ut="timer=setTimeout('out()',100)">
<div id="jieshi01" onmouseo ver="clearTimeout(timer1)" onmouseo ut="setTime('1')">
<ul>
<li>欢迎惠临<a href="#">乐清财税网</a>,您是本站第2842位客人!</li>
</ul>
</div>
<div id="jieshi02" onmouseo ver="clearTimeout(timer2)" onmouseo ut="setTime('2')">
<ul>
<li><a href="#">财税介绍 |</a></li>
<li><a href="#">机构设置 |</a></li>
<li><a href="#">处事指南 |</a></li>
<li><a href="#">税种介绍 |</a></li>
<li><a href="#">财税动态 |</a></li>
<li><a href="#">公车动态</a></li>
</ul>
</div>
<div id="jieshi03" onmouseo ver="clearTimeout(timer3)" onmouseo ut="setTime('3')">
<ul>
<li><a href="#">下载专区 |</a></li>
<li><a href="#">上传专区 |</a></li>
<li><a href="#">申请报名 |</a></li>
<li><a href="#">盘问体系 |</a></li>
<li><a href="#">咨询投诉 |</a></li>
<li><a href="#">餍足窥察</a></li>
</ul>
</div>
<div id="jieshi04" onmouseo ver="clearTimeout(timer4)" onmouseo ut="setTime('4')">
<ul>
<li><a href="#">最新关照通告 |</a></li>
<li><a href="#">司帐关照通告</a></li>
</ul>
</div>
<div id="jieshi05" onmouseo ver="clearTimeout(timer5)" onmouseo ut="setTime('5')">
<ul>
<li><a href="#">最新政策 |</a></li>
<li><a href="#">政策法则盘问</a></li>
</ul>
</div>
<div id="jieshi06" onmouseo ver="clearTimeout(timer6)" onmouseo ut="setTime('6')">
<ul>
<li><a href="#">税收宣传 |</a></li>
<li><a href="#">军队制作 |</a></li>
<li><a href="#">文明竖立 |</a></li>
<li><a href="#">亲年论坛 |</a></li>
<li><a href="#">廉政课堂</a></li>
</ul>
</div>
<div id="jieshi07" onmouseo ver="clearTimeout(timer7)" onmouseo ut="setTime('7')">
<ul>
<li><a href="#">专题宣传取</a></li>
</ul>
</div>
</div>
</td></tr>
</table>