选项卡:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>tab</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#tab{
width:312px;
margin:100px auto;
}
#tab ul{
list-style:none;
}
#tabControl{
border-top:solid 2px #206f96;
width:310px;
display:table;
}
#tabControl span{
display:table-cell;
text-align:center;
font:14px/30px "宋体";
height:29px;
line-height:29px;
}
.info{
color:#666;
font-size:14px;
line-height:30px;
}
#s1{
border-left:1px solid #CFCFCF;
border-right:1px solid #CFCFCF;
}
#s2{
background-image:url(1.jpg);
background-repeat:repeat-x;
border-right:1px solid #CFCFCF;
border-bottom:1px solid #CFCFCF;
}
#s3{
background-image:url(1.jpg);
background-repeat:repeat-x;
border-right:1px solid #CFCFCF;
border-bottom:1px solid #CFCFCF;
}
#info2{
display:none;
}
#info3{
display:none;
}
</style>
<script type="text/javascript">
function listXinWen(){
document.getElementById("s1").style.background = "none";
document.getElementById("s1").style.borderBottom = "none";
document.getElementById("s2").style.background = "url(1.jpg) repeat-x";
document.getElementById("s2").style.borderBottom = "1px solid #CFCFCF";
document.getElementById("s3").style.background = "url(1.jpg) repeat-x";
document.getElementById("s3").style.borderBottom = "1px solid #CFCFCF";
document.getElementById("info1").style.display = "block";
document.getElementById("info2").style.display = "none";
document.getElementById("info3").style.display = "none";
}
function listTuPian(){
document.getElementById("s2").style.background = "none";
document.getElementById("s2").style.borderBottom = "none";
document.getElementById("s1").style.background = "url(1.jpg) repeat-x";
document.getElementById("s1").style.borderBottom = "1px solid #CFCFCF";
document.getElementById("s3").style.background = "url(1.jpg) repeat-x";
document.getElementById("s3").style.borderBottom = "1px solid #CFCFCF";
document.getElementById("info2").style.display = "block";
document.getElementById("info1").style.display = "none";
document.getElementById("info3").style.display = "none";
}
function listJunShi(){
document.getElementById("s3").style.background = "none";
document.getElementById("s3").style.borderBottom = "none";
document.getElementById("s2").style.background = "url(1.jpg) repeat-x";
document.getElementById("s2").style.borderBottom = "1px solid #CFCFCF";
document.getElementById("s1").style.background = "url(1.jpg) repeat-x";
document.getElementById("s1").style.borderBottom = "1px solid #CFCFCF";
document.getElementById("info3").style.display = "block";
document.getElementById("info2").style.display = "none";
document.getElementById("info1").style.display = "none";
}
</script>
</head>
<body>
<div id="tab">
<div id="tabControl">
<span id="s1" onmouseover="listXinWen()">新闻</span>
<span id="s2" onmouseover="listTuPian()">图片</span>
<span id="s3" onmouseover="listJunShi()">军事</span>
</div>
<div id="info1" class="info">
<ul>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
</ul>
</div>
<div id="info2" class="info">
<ul>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
</ul>
</div>
<div id="info3" class="info">
<ul>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
</ul>
</div>
</div>
</body>
</html>
效果:
有子菜单的导航:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>navbar</title>
<script type="text/javascript">
function xianshi1(){
document.getElementById("cd1").style.display = "block";
}
function yincang1(){
document.getElementById("cd1").style.display = "none";
}
function xianshi2(){
document.getElementById("cd2").style.display = "block";
}
function yincang2(){
document.getElementById("cd2").style.display = "none";
}
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
#caidan{
width:800px;
margin:50px auto 5px;
background-color:#CCC;
height:35px;
}
#caidan ul{
list-style:none;
}
#caidan ul li.mu{
width:100px;
margin-right:10px;
background-color:#FC0;
float:left;
height:35px;
text-align:center;
line-height:35px;
position:relative;
}
#cd1{
width:150px;
position:absolute;
padding-top:5px;
display:none;
}
#cd1 ul{
list-style:none;
}
.zi{
background-color:#3C0;
}
#cd2{
width:120px;
position:absolute;
padding-top:5px;
display:none;
}
#cd2 ul{
list-style:none;
}
#content{
width:800px;
background:#FFC;
margin:0 auto;
}
</style>
</head>
<body>
<div id="caidan">
<ul>
<li class="mu" onmouseover="xianshi1()" onmouseout="yincang1()">
<a href="#">菜单项目</a>
<div id="cd1">
<div class="zi">
<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>
</li>
<li class="mu" onmouseover="xianshi2()" onmouseout="yincang2()">
<a href="#">菜单项目</a>
<div id="cd2">
<div class="zi">
<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>
<li><a href="#">子菜单项目</a></li>
</ul>
</div>
</div>
</li>
<li class="mu"><a href="#">菜单项目</a></li>
<li class="mu"><a href="#">菜单项目</a></li>
<li class="mu"><a href="#">菜单项目</a></li>
</ul>
</div>
<div id="content">
爱我中华爱我中华爱我中华爱我中华爱我中华爱我中华
</div>
</body>
</html>
效果: