<title>css + javscript 滑門,相容ff</title>
<style type="text/css">
<!--
li{ margin:0px; list-style-type:none; height:24px;}
#header { background-color:#F7FBFF; height:200px; width:502px; border:1px solid #7B9EBD;}
#menu { margin:0px; padding:0px; list-style-type: none; cursor:pointer; }
#menu li { width:100px; text-align:center; float:left; padding-top:0.2em 0px 0.2em 0px;}
.overit { background-color:#F7FBFF; border-bottom:0px;}
.outit { background-color:#DCE6F0;}
.block { display: block;}
.unblock { display: none;}
-->
</style>
<script language="javascript">
function Sliding(id,e){
e=e||window.event.srcElement;
var m=document.getElementById(e.parentNode.id).getElementsByTagName("li");
var t=document.getElementById(e.parentNode.getAttribute("content")).getElementsByTagName("li");
for(var n=0; n<m.length; n++){
m[n].className="outit";
t[n].className="unblock";
}
e.className = "overit";
t[id].className="block";
}
</script>
<div id="header">
<ul id="menu" content="main">
<li onMouseOver="Sliding(0)" class="overit">百匯電腦學校</li>
<li onMouseOver="Sliding(1)" class="outit">windows基礎 </li>
<li onMouseOver="Sliding(2)" class="outit">平面設計</li>
<li onMouseOver="Sliding(3)" class="outit">網頁設計</li>
<li onMouseOver="Sliding(4)" class="outit">關於我們</li>
</ul>
<!--內容顯示地區-->
<ul id="main">
<li class="block">一、百匯電腦學校</li>
<li class="unblock">二、windows基礎</li>
<li class="unblock">三、平面設計</li>
<li class="unblock">四、網頁設計</li>
<li class="unblock">五、xiaozhao,fengtingyun#126.com,48347674</li>
</ul>
<!--內容顯示地區-->
</div>