<Title> CSS + javscript sliding door, compatible with 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"> Baihui computer school </LI>
<Li onmouseover = "sliding (1)" class = "outit"> Windows basics </LI>
<Li onmouseover = "sliding (2)" class = "outit"> graphic design </LI>
<Li onmouseover = "sliding (3)" class = "outit"> Webpage Design </LI>
<Li onmouseover = "sliding (4)" class = "outit"> about us </LI>
</Ul>
<! -- Content display area -->
<Ul id = "Main">
<Li class = "Block"> 1. Baihui computer school </LI>
<Li class = "unblock"> 2. Windows basics </LI>
<Li class = "unblock"> 3. Graphic Design </LI>
<Li class = "unblock"> 4. Webpage Design </LI>
<Li class = "unblock"> 5. Xiaozhao, fengtingyun # 126.com, 48347674 </LI>
</Ul>
<! -- Content display area -->
</Div>