仿爱微网两级导航菜单

答案：<html>
<head>
<title>一个两级的网页菜单</title>
<style>
*{margin:0;padding:0;}
.subnav {
    background-color: #3188DA;
    color: #C0DEF9;
    height: 20px;
}
.subnav a {
    color: #FFFFFF;
    margin-bottom: 0;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0;
}
.subnav a.cur {
    color: #FAEC04;
}

.aa {
    background-image: url("images/ui1.png");
    background-origin: padding-box;
    background-position: left -92px;
    background-repeat: no-repeat;
}
.bb {
    
    background-color: #75BAFB;
    background-image: url("images/ui1.png");
    background-position: left -183px;
    background-repeat: no-repeat;
}
.cc{color:#ffffff;}
.dd{color:#000}
ul,li{list-style-type:none}
#navbox {
    margin-bottom: 15px;
    position: relative;
	width:960px;
}
.mainnav {
    border-bottom-color: #3188DA;
    border-bottom-style: solid;
    border-bottom-width: 5px;
    height: 31px;
}
.mainnav li {
    color: #FFFFFF;
    float: left;
    font-size: 14px;
    font-weight: bold;
    line-height: 31px;
    margin-right: 5px;
    text-align: center;
    width: 90px;
}
.mainnav li a {
    display: block;
    font-weight: normal;
    height: 31px;
}
.uhide{display:none;}
.ushow{display:block;}
</style>
</head>
<body>
<div id="navbox">
<ul class="mainnav">
	<li class='bb' onclick='qh(0);' id='ta_0'><a href="#" class='cc' id='a0'>首页</a></li>
	<li class='aa' onclick='qh(1);' id='ta_1'><a href="#"  class='dd' id='a1'>PHP教程</a></li>
	<li class='aa' onclick='qh(2);' id='ta_2'><a href="#" class='dd' id='a2'>网页前端</a></li>
	<li class='aa' onclick='qh(3);' id='ta_3'><a  href="#" class='dd'  id='a3'>网页特效</a></li>
	<li class='aa' onclick='qh(4);'  id='ta_4'><a href="#" class='dd' id='a4'>源码下载</a></li>
</ul>
<div style="padding-left:20px;" class="uhide" id='tab_0'>

</div>

<div style="padding-left:20px;" class="subnav uhide" id='tab_1'>
<a  >PHP基础</a> | 
<a  href="#">mysql教程</a> | 
<a  href="#">smarty教程</a> |
<a  href="#">PHP框架</a> | 
<a  href="#">PHP开源</a> | 
<a  href="#">Linux教程</a> 
</div>

<div style="padding-left:20px;" class="subnav uhide" id='tab_2'>
<a  >DIV+CSS布局</a> | 
<a  href="#">javascript教程</a> | 
<a  href="#">jquery教程</a> |
<a  href="#">ajax教程</a> | 
<a  href="#">flash开源</a> | 
<a  href="#">photoshop教程</a> 
</div>

<div style="padding-left:20px;" class="subnav uhide" id='tab_3'>
<a  >js导航菜单</a> | 
<a  href="#">js表单特效</a> | 
<a  >js幻灯片</a> |
<a  href="#">js文本特效</a> | 
<a  href="#">js弹出层</a> | 
<a  href="#">js网页特效</a> 
</div>
<div style="padding-left:20px;" class="uhide" id='tab_4'>
</div>
</div>
<script>
function g(o){return document.getElementById(o);}
function qh(n){
	for(var i=0;i<=6;i++){
		g('ta_'+i).className='aa';
		g('ta_'+n).className='bb';
		g('a'+i).className='dd';
		g('a'+n).className='cc';
		g('tab_'+i).className='uhide subnav';
		g('tab_'+n).className='ushow subnav';
		g('tab_0').className='uhide';
		g('tab_0').className='uhide';
		g('tab_4').className='uhide';
		g('tab_4').className='uhide';
	}

}
</script>
</body>
</html>
上一个：大气/蓝色底边、带箭头的导航菜单
下一个：jQuery灰-蓝风格标准下拉二级菜单
更多图片编程知识: