CSS滑动门，兼容性非常好

兼容性好的CSS没去门，其实这里还是要用到JS来配合，不过相对其它的滑动门菜单，本没去门将代码做到了最简化，而且兼容性也不错，因此这是本菜单的亮点，从外观上来说，它和其它的没去门没有大的区别，但愿这正是你需要的。

答案：<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('/jscss/demoimg/200906/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('/jscss/demoimg/200906/glossyback.gif'); background-repeat: no-repeat; color:#1F3A87 ;} 
.hovertab     { background-image: url('/jscss/demoimg/200906/glossyback2.gif');  color:#1F3A87; font-weight:bold } 
.dis{display:block;} 
.undis{display:none;} 
--> 
</STYLE>
<SCRIPT language=javascript 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 onmouseover=xgz:HoverLi(1);>站长资源库</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>我们网站为您提供精品源码、JavaScript/CSS特效代码以及常用编程软件下载等。</DIV>
<DIV class=undis id=tbc_02>网页特效，收录精品的网页代码</DIV>
<DIV class=undis id=tbc_03>学习型源代码</DIV>
<DIV class=undis id=tbc_04>网站分类</DIV>

上一个：像电灯开关一样的竖直菜单
下一个：CSS实现带滚动条的二级竖直菜单