下面是和dhc差不多的導(dǎo)航效果源碼，效果兼容性非常高，歡迎大家測(cè)試舉報(bào)。
<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" onmouseover="over('title01','a1','title07');show_jieshi('jieshi01');clearTimeout(timer);clearTimeout(timer1)" onmouseout="setTime('1');timer=setTimeout('out()',100)"><a href="#" id="a1"><div id="title01">財(cái)稅首頁(yè)</div></a></li>
<li id="lianjie02" onmouseover="over('title02','a2','title01');show_jieshi('jieshi02');clearTimeout(timer);clearTimeout(timer2)" onmouseout="setTime('2');timer=setTimeout('out()',100)"><a href="#" id="a2"><div id="title02">政務(wù)公開(kāi)</div></a></li>
<li id="lianjie03" onmouseover="over('title03','a3','title02');show_jieshi('jieshi03');clearTimeout(timer);clearTimeout(timer3)" onmouseout="setTime('3');timer=setTimeout('out()',100)"><a href="#" id="a3"><div id="title03">網(wǎng)上辦事</div></a></li>
<li id="lianjie04" onmouseover="over('title04','a4','title03');show_jieshi('jieshi04');clearTimeout(timer);clearTimeout(timer4)" onmouseout="setTime('4');timer=setTimeout('out()',100)"><a href="#" id="a4"><div id="title04">公告中心</div></a></li>
<li id="lianjie05" onmouseover="over('title05','a5','title04');show_jieshi('jieshi05');clearTimeout(timer);clearTimeout(timer5)" onmouseout="setTime('5');timer=setTimeout('out()',100)"><a href="#" id="a5"><div id="title05">法規(guī)中心</div></a></li>
<li id="lianjie06" onmouseover="over('title06','a6','title05');show_jieshi('jieshi06');clearTimeout(timer);clearTimeout(timer6)" onmouseout="setTime('6');timer=setTimeout('out()',100)"><a href="#" id="a6"><div id="title06">財(cái)稅文化</div></a></li>
<li id="lianjie07" onmouseover="over('title07','a7','title06');show_jieshi('jieshi07');clearTimeout(timer);clearTimeout(timer7)" onmouseout="setTime('7');timer=setTimeout('out()',100)"><a href="#" id="a7"><div id="title07">專(zhuān)題宣傳</div></a></li>
</ul>
</div>
</td></tr>
<tr>
<td>
<div id="div_bottom" onmouseover="clearTimeout(timer)" onmouseout="timer=setTimeout('out()',100)">
<div id="jieshi01" onmouseover="clearTimeout(timer1)" onmouseout="setTime('1')">
<ul>
<li>歡迎光臨<a href="#">樂(lè)清財(cái)稅網(wǎng)</a>，您是本站第2842位客人！</li>
</ul>
</div>
<div id="jieshi02" onmouseover="clearTimeout(timer2)" onmouseout="setTime('2')">
<ul>
<li><a href="#">財(cái)稅簡(jiǎn)介 |</a></li>
<li><a href="#">機(jī)構(gòu)設(shè)置 |</a></li>
<li><a href="#">辦事指南 |</a></li>
<li><a href="#">稅種簡(jiǎn)介 |</a></li>
<li><a href="#">財(cái)稅動(dòng)態(tài) |</a></li>
<li><a href="#">公車(chē)動(dòng)態(tài)</a></li>
</ul>
</div>
<div id="jieshi03" onmouseover="clearTimeout(timer3)" onmouseout="setTime('3')">
<ul>
<li><a href="#">下載專(zhuān)區(qū) |</a></li>
<li><a href="#">上傳專(zhuān)區(qū) |</a></li>
<li><a href="#">申請(qǐng)報(bào)名 |</a></li>
<li><a href="#">查詢(xún)系統(tǒng) |</a></li>
<li><a href="#">咨詢(xún)投訴 |</a></li>
<li><a href="#">滿意調(diào)查</a></li>
</ul>
</div>
<div id="jieshi04" onmouseover="clearTimeout(timer4)" onmouseout="setTime('4')">
<ul>
<li><a href="#">最新公告 |</a></li>
<li><a href="#">會(huì)計(jì)公告</a></li>
</ul>
</div>
<div id="jieshi05" onmouseover="clearTimeout(timer5)" onmouseout="setTime('5')">
<ul>
<li><a href="#">最新政策 |</a></li>
<li><a href="#">政策法規(guī)查詢(xún)</a></li>
</ul>
</div>
<div id="jieshi06" onmouseover="clearTimeout(timer6)" onmouseout="setTime('6')">
<ul>
<li><a href="#">稅收宣傳 |</a></li>
<li><a href="#">隊(duì)伍建設(shè) |</a></li>
<li><a href="#">文明創(chuàng)建 |</a></li>
<li><a href="#">親年論壇 |</a></li>
<li><a href="#">廉政課堂</a></li>
</ul>
</div>
<div id="jieshi07" onmouseover="clearTimeout(timer7)" onmouseout="setTime('7')">
<ul>
<li><a href="#">專(zhuān)題宣傳取</a></li>
</ul>
</div>
</div>
</td></tr>
</table>
