一个简单方法实现了css滑动门菜单，正研究滑动门的朋友请关注一下，这个代码可以让你了解滑动门的实现过程，没有用什么复杂的方法，只用简单配合js，就完成了一个流行的滑动导航。

＜title＞
    如此简单就实现了css滑动门
＜/title＞
＜style type="text/css"＞
*{}
 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.codefans.net/jscss/demoimg/200904/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＞


＜div style="width:513px; float:left; clear:both;"＞
    ＜div class="sliding_tab"＞
        ＜ul＞
            ＜li＞
            ＜/li＞
            ＜li＞
                ＜a class="tabs_act" id="set_tab01" onmouseover="hovertab('1','2','set_','');" href="#"＞css＜/a＞
            ＜/li＞
            ＜li＞
            ＜/li＞
            ＜li＞
                ＜a class="tabs" id="set_tab02" onmouseover="hovertab('2','2','set_','');" href="#"＞ajax＜/a＞ 
            ＜/li＞
            ＜li class="table_li"＞＜/li＞
            ＜li＞
            ＜/li＞
        ＜/ul＞
    ＜/div＞


    ＜div class="tablist" id="set_div01"＞
        css内容
    ＜/div＞


    ＜div class="tablist" id="set_div02" style="display: none"＞
        ajax内容
    ＜/div＞
＜/div＞