本文章提供两款兼容性非常好的css滑动门菜单哦，他们是利用了js css实例的滑动门菜单效果，好了费话不说多了记住有二款哦，一款款下载吧。
代码如下
复制代码
<title>一款兼容性非常好的css滑动门菜单</title>
<style type=text/css media=screen>
<!--
*{font-size:12px;}
ul{list-style-type:none; margin:0px;}
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both}
.w936{width:100%;margin:2px 0;clear:both;border:1px solid skyblue}
/* tab 切换效果 */
.tb_{background-color: #e6f2ff; background-image: url('http://www.111cn.net/html/txdm_2/images/20100704/glossyback.gif'); background-repeat: repeat-x;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;padding-top: 6px;width: 94px;cursor:pointer;}
.normaltab{ background-image:url('http://www.111cn.net/html/txdm_2/images/20100704/glossyback.gif'); background-repeat: no-repeat; color:#1f3a87 ;}
.hovertab{ background-image: url('http://www.111cn.net/html/txdm_2/images/20100704/glossyback2.gif');color:#1f3a87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</style>
<script language=网页特效 type=text/javascript>
<!--
function g(o){return document.getelementbyid(o);}
function hoverli(n){
//n个标签,就将i<=n;
;
for(var i=1;i<=4;i++){g('tb_'+i).classname='normaltab';g('tbc_0'+i).classname='undis';}g('tbc_0'+n).classname='dis';g('tb_'+n).classname='hovertab';
}
//-->
</script>
<div class=w936>
<div class=tb_ id=tb_>
<ul>
<li class=hovertab id=tb_1 onmouseo教程ver=xgz:hoverli(1);>111cn.net</li>
<li class=normaltab id=tb_2 onmouseover=xgz:hoverli(2);>网页特效</li>
<li class=normaltab id=tb_3 onmouseover=xgz:hoverli(3);>源码下载</li>
<li class=normaltab id=tb_4 onmouseover=xgz:hoverli(4);>素材资源</li>
</ul></div>
<div class=ctt>
<div class=dis id=tbc_01><a href="http://">网页.特效</a>
<a href="http://">源码.下载</a>
<a href="#">seo.优化</a>
<a href="#">免费.空间</a>
<a href="http://">交换.链接</a></div>
<div class=undis id=tbc_02><a href="#" title="\">菜单导航特效</a>
<a href="#" title="\">图层样式特效</a>
<a href="#" title="\">链接文本特效</a>
<a href="#" title="\">图形图像特效</a>
<a href="#" title="\">鼠标特效.代码</a>
<a href="#" title="\">页面窗口特效</a>
<a href="#" title="\">网页背景特效</a>
<a href="#" title="\">日期时间特效</a></div>
<div class=undis id=tbc_03><a href="http://" title="\">淘客源码下载</a>
<a href="http://" title="\">cms系统源码</a>
<a href="http://" title="\">seo工具软件</a></div>
<div class=undis id=tbc_04><a href="http://links.111cn.net/">友情链接交换平台</a>
<a href="#/">免费.空间</a>
<a href="#/">透明flash</a>
</div>
<p align="center">本特效由 <a href="#" target="_blank">收集于互联网，只为兴趣与学习交流，不作商业用途。</p>
实例代码二
代码如下
复制代码
<html>
<head>
<title>一个简单的css滑动门菜单的实现</title>
<style type="text/css">
*{font-size:9pt;}
ul li { list-style: none; }
ul, li { margin: 0; padding: 0;}
.tabs,.tabs_act{float:left;width:103px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;height:25px;text-align:center;line-height:25px;display:block;}
.tabs_act{font-weight:bold;color:#fc7404;border-bottom:1px solid #fff;background-image:url(http://www.111cn.net/html/txdm_2/images/20100911/bgoff4.gif)}
.sliding_tab{width:513px;border-left:1px solid #ccc;height:27px;}
.sliding_tab li{float:left;border-top:1px solid #ccc;}
.sliding_tab li.table_li{border-bottom:1px solid #ccc;border-top:0px;width:305px;height:26px;line-height:26px;}
.tablist { clear:both; width:513px;border:1px solid #ccc;border-top:0px;height:300px;overflow:hidden;}
</style>
<script language=javascript type=text/javascript>
function g(o){return document.getelementbyid(o);}
function hovertab(num,counts,tabname,tabclass){
for (i=1;i<=counts;i++){
g(tabname+'tab0'+i).classname=tabclass+'tabs';
g(tabname+'div0'+i).style.display='none';
}
g(tabname+'tab0'+num).classname=tabclass+'tabs_act';
g(tabname+'div0'+num).style.display='block';
}</script>
</head>
<body>
<div style=" width:513px; float:left; clear:both;">
<div class="sliding_tab">
<ul>
<li><a class=tabs_act id=set_tab01 onmouseover="hovertab('1','2','set_','');" href="#">111cn.net</a></li>
<li><a class=tabs id=set_tab02 onmouseover="hovertab('2','2','set_','');" href="#">精品网页特效</a> </li>
<li class="table_li"></li>
</ul>
</div>
<div class=tablist id=set_div01>
<li><a href="http://www.111cn.net/html/txdm/">网页.特效</a></li>
<li><a href="http://www.111cn.net/html/seo/">seo.优化</a></li>
<li><a href="http://download.111cn.net/">源码.下载</a></li>
<li><a href="http://www.111cn.net/html/mfkj/">免费.空间</a></li>
<li><a href="http://links.111cn.net/">交换.链接</a></li>
<li><a href="http://www.111cn.net/seotools/">收录.查询</a></li>
<li><a href="http://shop.111cn.net/">芯晴淘宝站</a></li>
<li><a href="http://changshi.111cn.net/">生活常识网</a></li>
</div>
<div class=tablist id=set_div02 style="display: none">
<li><a href="http://www.111cn.net/html/txdm/cddh/" title="\">菜单导航特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/tcys/" title="\">图层样式特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/ljwb/" title="\">链接文本特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/txtx/" title="\">图形图像特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/sbtx/" title="\">鼠标特效.代码</a></li>
<li><a href="http://www.111cn.net/html/txdm/ymck/" title="\">页面窗口特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/wybj/" title="\">网页背景特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/rqsj/" title="\">日期时间特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/ymss/" title="\">页面搜索特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/bgtx/" title="\">表格表单特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/qtdm/" title="\">其他网页特效</a></li>
</div>
</div>
</body>
</html>
<p align="center">本特效由 <a href="http://www.111cn.net">芯晴网页特效</a>丨111cn.net 收集于互联网，只为兴趣与学习交流，不作商业用途。</p>
文章由 芯晴网页特效|111cn.net 收集(www.111cn.net) 详文参考：http://www.111cn.net/html/txdm/cddh/2296.htm
