一个简单方法实现了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([url=http://www.codefans.net/jscss/demoimg/200904/bgoff4.gif]http://www.codefans.net/jscss/demoimg/200904/bgoff4.gif[/url])}
.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(&#39;1&#39;,&#39;2&#39;,&#39;set_&#39;,&#39;&#39;);" href="#">css</a>
            </li>
            <li>
            </li>
            <li>
                <a class="tabs" id="set_tab02" onmouseover="hovertab(&#39;2&#39;,&#39;2&#39;,&#39;set_&#39;,&#39;&#39;);" 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>