DIV+CSS漂亮滑动门导航条

DIV+CSS漂亮滑动门导航条

DIV+CSS漂亮滑动门导航条
                             

<META content=漂亮滑动门，漂亮的滑动门导航 name=keywords>
<STYLE type=text/css>
<!--
/*全局样式*/
*{
font-size:12px;
}
body{
margin:0;
padding:0;
background-color:#FFFFFF;
font-size:12px;
color:#666666;
font-family: "宋体",Arial, Helvetica,sans-serif;
}
#menu ul{
padding:0;
border:0;
list-style:none;
line-height:150%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 15px;
}
/*主导航菜单*/
#menu_out{
width:966px;
padding-left:4px;
margin-left:auto;
margin-right:auto;
background:url(./20080814menu_left.gif) no-repeat left top;
}
#menu_in{
background:url(./20080814menu_right.gif) no-repeat right top;
padding-right:4px;
}
#menu{
background:url(./20080814menu_bg.gif) repeat-x;
height:73px;
}
.menu_line{
background:url(./20080814menu_line.gif) no-repeat center top;
width:8px;
}
.menu_line2{
background:url(./20080814menu_line2.gif) no-repeat center top;
width:15px;
}
#nav{
padding-left:20px;
}
#nav li{
float:left;
height:35px;
}
#nav li a{
float:left;
display:block;
padding-left:6px;
height:35px;
background:url(./20080814menu_on_left.gif) no-repeat left top;
cursor:pointer;
text-decoration:none;
}
#nav li a span{
float:left;
padding:11px 14px 10px 10px;
line-height:14px;
background:url(./20080814menu_on_right.gif) no-repeat right top;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
}
#nav li .nav_on{ /*鼠标经过时变换背景，方便JS获取样式*/
background-position:left 100%;
}
#nav li .nav_on span{ /*鼠标经过时变换背景，方便JS获取样式*/
background-position:right 100%;
color:#333333;
text-decoration:none;
padding:14px 14px 7px 10px;
}
/*子栏目*/
#menu_con{
text-align:left;
padding-left:20px;
clear:both;
}
#menu_con li{
float:left;
height:22px;
margin-top:8px;
}
#menu_con li a{
display:block;
float:left;
background:url(./20080814menu_on_left2.gif) no-repeat left top;
cursor:pointer;
padding-left:3px;
}
#menu_con li a span{
float:left;
padding:6px 10px 4px 10px;
line-height:12px;
background:url(./20080814menu_on_right2.gif) no-repeat right top;
}
#menu_con li a:hover{
text-decoration:none;
background:url(./20080814menu_on_left2.gif) no-repeat left bottom;
}
#menu_con li a:hover span{
background:url(./20080814menu_on_right2.gif) no-repeat right bottom;
}

#a {
width: 970px;
font-size: 14px;
text-align: center;
color: #000000;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}
-->
</STYLE>
<BR><BR>
<SCRIPT language=javascript>
function qiehuan(num){
for(var id = 0;id<=9;id++)
{
if(id==num)
{
document.getElementById("qh_con"+id).style.display="block";
document.getElementById("mynav"+id).className="nav_on";
}
else
{
document.getElementById("qh_con"+id).style.display="none";
document.getElementById("mynav"+id).className="";
}
}
}
</SCRIPT>

<DIV id=menu_out>
<DIV id=menu_in>
<DIV id=menu>
<UL id=nav>
<LI><A class=nav_on id=mynav0 onmouseover=javascript:qiehuan(0)href="http://www.qipao8.com"><SPAN>首 页</SPAN></A> </LI>
<LI class=menu_line></LI>
<LI><A class=nav_off id=mynav1 onmouseover=javascript:qiehuan(1)href="#"><SPAN>AAA</SPAN></A> </LI>
<LI class=menu_line></LI>
<LI><A class=nav_off id=mynav2 onmouseover=javascript:qiehuan(2)href="#"><SPAN>AAA</SPAN></A> </LI>
<LI class=menu_line></LI>
<LI><A class=nav_off id=mynav3 onmouseover=javascript:qiehuan(3)href="#"><SPAN>BBB</SPAN></A> </LI>
<LI class=menu_line></LI>
<LI><A class=nav_off id=mynav4 onmouseover=javascript:qiehuan(4)href="#"><SPAN>CCC</SPAN></A> </LI>
<LI class=menu_line></LI>
<LI><A class=nav_off id=mynav5 onmouseover=javascript:qiehuan(5)href="#"><SPAN>DDD</SPAN></A> </LI>
<LI class=menu_line></LI>
<LI><A class=nav_off id=mynav6 onmouseover=javascript:qiehuan(6)href="#"><SPAN>EEE</SPAN></A> </LI>
<LI class=menu_line></LI>
<LI><A class=nav_off id=mynav7 onmouseover=javascript:qiehuan(7)href="#"><SPAN>FFF</SPAN></A></LI>
<LI class=menu_line></LI>
<LI><A class=nav_off id=mynav8 onmouseover=javascript:qiehuan(8)href="#"><SPAN>GGG</SPAN></A> </LI>
<LI class=menu_line></LI>
<LI><A class=nav_off id=mynav9 onmouseover=javascript:qiehuan(9)href="#" target=_blank><SPAN>HHH</SPAN></A></LI>
<LI class=menu_line></LI></UL>
<DIV id=menu_con>
<DIV id=qh_con0 style="DISPLAY: block">
<UL>
<LI>漂亮的滑动门导航</A></LI>
<LI class=menu_line2></LI>
<LI><Ahref="#"><SPAN>test</SPAN></A></LI>
<LI class=menu_line2></LI>
<LI><Ahref="#"><SPAN>test1</SPAN></A></LI></UL></DIV>
<DIV id=qh_con1 style="DISPLAY: none">
<UL>
<LI>漂亮的滑动门导航</A></LI>
<LI class=menu_line2></LI>
<LI><Ahref="#"><SPAN>aaaaaaaaaaaaaaaaaaa</SPAN></A></LI>
<LI class=menu_line2></LI></UL></DIV>
<DIV id=qh_con2 style="DISPLAY: none">
<UL>
<LI>漂亮的滑动门导航</A></LI>
<LI class=menu_line2></LI>
<LI><A href="#"><SPAN>bbbbbbbbbbbbbbbbbb</SPAN></A></LI>
<LI class=menu_line2></LI></UL></DIV>
<DIV id=qh_con3 style="DISPLAY: none">
<UL>
<LI><Ahref="#"><SPAN>ccccccccccccccccccc</SPAN></A></LI>
<LI class=menu_line2></LI></UL></DIV>
<DIV id=qh_con4 style="DISPLAY: none">
<UL>
<LI><Ahref="#"><SPAN>ddddddddddddddddddd</SPAN></A></LI>
<LI class=menu_line2></LI></UL></DIV>
<DIV id=qh_con5 style="DISPLAY: none">
<UL>
<LI><Ahref="#"><SPAN>eeeeeeeeeeeeeeee</SPAN></A></LI>
<LI class=menu_line2></LI></UL></DIV>
<DIV id=qh_con6 style="DISPLAY: none">
<UL>
<LI><Ahref="#"><SPAN>fffffffffffffffffff</SPAN></A></LI>
<LI class=menu_line2></LI></UL></DIV>
<DIV id=qh_con7 style="DISPLAY: none">
<UL>
<LI><Ahref="#"><SPAN>gggggggggggggggg</SPAN></A></LI>
<LI class=menu_line2></LI></UL></DIV>
<DIV id=qh_con8 style="DISPLAY: none">
<UL>
<LI>##############################</LI></UL></DIV>
<DIV id=qh_con9 style="DISPLAY: none">
<UL>
<LI>###############################</LI></UL></DIV></DIV></DIV></DIV></DIV><BR><BR>
<DIV id=a>此导航条转载至 智博络http://www.enetom.com</DIV> <center></center>