演示效果截图
用到的图片
CSS橙色二级水平菜单 图片打包下载
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{966px;padding-left:4px;
margin-left:auto;margin-right:auto;
background:url(menu_left.gif) no-repeat left top;}
#menu_in{
background:url(menu_right.gif) no-repeat right top;
padding-right:4px;}
#menu{background:url(menu_bg.gif) repeat-x;
height:73px;}
.menu_line{
background:url(menu_line.gif) no-repeat center top;
8px;}
.menu_line2{
background:url(menu_line2.gif) no-repeat center top;
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(menu_on_left.gif) no-repeat left top;
cursor:pointer;text-decoration:none;}
#nav li a span{float:left;padding:11px 14px 10px 10px;
background:url(menu_on_right.gif) no-repeat right top;
font-size:14px;line-height: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(menu_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(menu_on_right2.gif) no-repeat right top;}
#menu_con li a:hover{text-decoration:none;
background:url(menu_on_left2.gif) no-repeat left bottom;}
#menu_con li a:hover span{
background:url(menu_on_right2.gif) no-repeat right bottom;}
JavaScript代码
<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>
HTML代码
<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.865171.cn/"><SPAN>首 页</SPAN></A></LI>
<LI class="menu_line"></LI><li>
<a href="http://www.865171.cn/css-templates/"
onmouseover="javascript:qiehuan(1)" id="mynav1"
class="nav_off"><span>CSS模板</span></a></li>
<li class="menu_line"></li><li>
<a href="http://www.865171.cn/admin-templates/"
onmouseover="javascript:qiehuan(2)" id="mynav2"
class="nav_off"><span>后台模板</span></a></li>
<li class="menu_line"></li><li>
<a href="http://www.865171.cn/css-code/"
onmouseover="javascript:qiehuan(3)" id="mynav3"
class="nav_off"><span>CSS代码</span></a></li>
<li class="menu_line"></li><li>
<a href="http://www.865171.cn/css-menu/"
onmouseover="javascript:qiehuan(4)" id="mynav4"
class="nav_off"><span>CSS菜单</span></a></li>
<li class="menu_line"></li><li>
<a href="http://www.865171.cn/csss-chart/"
onmouseover="javascript:qiehuan(5)" id="mynav5"
class="nav_off"><span>CSS图表</span></a></li>
</UL><div id=menu_con>
<div id=qh_con0 style="DISPLAY: block"><UL>
<LI><a href="http://www.865171.cn/">
<span>免费模板网 www.865171.cn</span></A></LI>
<LI class=menu_line2></LI>
<LI><A href="http://www.865171.cn/">
<SPAN>首 页</SPAN></A></LI>
</UL></div><div id=qh_con1 style="DISPLAY: none"><UL>
<LI><a href="http://www.865171.cn/">
<span>免费模板网 www.865171.cn</span></A></LI>
<LI class=menu_line2></LI>
<LI><A href="http://www.865171.cn/">
<SPAN>CSS模板</SPAN></A></LI></UL></div>
<div id=qh_con2 style="DISPLAY: none">
<UL><LI><a href="http://www.865171.cn/">
<span>免费模板网 www.865171.cn</span></A></LI>
<LI class=menu_line2></LI><LI><A href="http://www.865171.cn/">
<SPAN>后台模板</SPAN></A></LI></UL></div>
<div id=qh_con3 style="DISPLAY: none">
<UL><LI><a href="http://www.865171.cn/">
<span>免费模板网 www.865171.cn</span></A></LI>
<LI class=menu_line2></LI><LI><A href="http://www.865171.cn/">
<SPAN>CSS代码</SPAN></A></LI></UL></div>
<div id=qh_con4 style="DISPLAY: none">
<UL><LI><a href="http://www.865171.cn/">
<span>免费模板网 www.865171.cn</span></A></LI>
<LI class=menu_line2></LI><LI><A href="http://www.865171.cn/">
<SPAN>CSS菜单</SPAN></A></LI></UL></div>
<div id=qh_con5 style="DISPLAY: none">
<UL><LI><a href="http://www.865171.cn/">
<span>免费模板网 www.865171.cn</span></A></LI>
<LI class=menu_line2></LI><LI><A href="http://www.865171.cn/">
<SPAN>CSS图表</SPAN></A></LI></UL></div>
</div></div></div></div>
<br /><br />
<div id="a"><a href="http://www.865171.cn" target="_blank">
免费模板网 www.865171.cn</a></div>