鼠标移到栏目自动展开相对应的内容，在网页效果制作当中应用非常广泛，效果图如下所示：
详细代码如下：
页面代码：
<div id="tb2_" class="tb_">
<ul>
<li id="tb2_1" class="normaltab" onmouseover="xgk:HoverLii(1);">公司简介</li>
<li id="tb2_2" class="normaltab" onmouseover="xgk:HoverLii(2);">公司动态</li>
<li id="tb2_3" class="normaltab" onmouseover="xgk:HoverLii(3);">公司新闻</li>
<li id="tb2_4" class="normaltab" onmouseover="xgk:HoverLii(4);">最新产品</li>
<li id="tb2_5" class="normaltab" onmouseover="xgk:HoverLii(5);">推荐产品</li>
</ul>
</div>
<div class="ctt1">
<div class="dis" id="tbc2_01">
公司简介内容
</div>
<div class="undis" id="tbc2_02">
公司动态内容
</div>
<div class="undis" id="tbc2_03">
公司新闻内容
</div>
<div class="undis" id="tbc2_04">
最新产品内容
</div>
<div class="undis" id="tbc2_05">
推荐产品内容
</div>
javascript代码：
<script type="text/javascript" language="javascript">
function g(o){return document.getElementById(o);}
function HoverLii(n){
for(var i=1;i<=5;i++){g('tb2_'+i).className='normaltab';g('tbc2_0'+i).className='undis';}g('tbc2_0'+n).className='dis';g('tb2_'+n).className='hovertab';
}
</script>
CSS代码：
.tb_{
background-color: #000000;
width:1003px;
height:30px;
background-image: url(../../images/bgmenu.jpg);
background-repeat: repeat-x;
}
.tb_ ul{
height:30px;
margin-left: 0px;
padding-left: 0px;
margin-left:55px;
}
.tb_ li{
height: 30px;
padding-top: 6px;
width: 150px;
cursor:pointer;
left: 2px;
float: left;
clip: rect(auto,auto,0px,auto);
bottom: 0px;
top: 0px;
}
.normaltab{
padding-left:35px;
background-image:url('../../images/indexpre1.jpg');
background-repeat: no-repeat;
height: 26px;
width:138px;
font-size:14px;
margin-top:2px;
font-weight:900;
}
.hovertab{
padding-left:35px;
background-image: url('../../images/indexbg1.jpg');
background-repeat: no-repeat;
height: 26px;
width:138px;
font-size:14px;
margin-top:2px;
font-weight:900;
}
.ctt1{
min-height:150px;
width:993px;
clear:both;
padding-right: 1px;
padding-left: 1px;
top: 0px;
font-size:12px;
line-height:25px;
padding:5px;
background-color:#FFF;
}
.dis{
display:block;
top: 0px;
padding: 0px;
}
.undis{display:none;}
上述既为js和css控制滑动门(鼠标移到栏目自动展开)代码。