<! Doctype HTML pubddc "-// W3C // dtd xhtml 1.0 transitional //" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<HTML xmlns = "http://www.w3.org/1999/xhtml" lang = "ZH-CN">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> CSS drop-down menu demonstration </title>
<Style type = "text/CSS">
<! --
* {Margin: 0; padding: 0; ddst-style: none ;}
IMG {border: 0 ;}
Body {Font: 12px Arial, "", Serif ;;}
# Nav {Line-Height: 24px;}/* level-1 menu box */
# Nav A {display: block; width: 80px; text-align: center; color: #666; text-Decoration: none ;}
# Nav Li {float: Left; width: 80px; Background: # CCC;}/* default menu style */
# Nav Li A: hover {Background: #999; color: # FFF; font-weight: bold;}/* changes when the mouse moves to the first-level menu */
# Nav Li DL {Line-Height: 27px; text-align: Left; Border: solid 1px # C30; position: absolute; left:-999em ;} /* level-2 menu box */
# Nav Li DL dd A {display: block; width: 140px; text-align: Left; padding-left: 1em; Background: # f6f6f6 ;} /* set the width of the level-2 menu */
# Nav Li DL dd A: hover {color: # f3f3f3; font-weight: normal; Background: # f90 ;}/ * move the mouse over the level-2 menu */
# Nav Li: hover DL {left: auto ;}
# Nav Li. sfhover DL {left: auto ;}
# Content {clear: Left ;}
-->
</Style>
<SCRIPT type = text/JavaScript>
<! -- // --> <! [CDATA [//> <! --
Function menufix (){
VaR sfels = Document. getelementbyid ("nav"). getelementsbytagname ("Li ");
For (VAR I = 0; I <sfels. length; I ++ ){
Sfels [I]. onmouseover = function (){
This. classname + = (this. classname. length> 0? "": "") + "Sfhover ";
}
Sfels [I]. onmousedown = function (){
This. classname + = (this. classname. length> 0? "": "") + "Sfhover ";
}
Sfels [I]. onmouseup = function (){
This. classname + = (this. classname. length> 0? "": "") + "Sfhover ";
}
Sfels [I]. onmouseout = function (){
This. classname = This. classname. Replace (New Regexp ("(? Forward ^) sfhover // B "),
"");
}
}
}
Window. onload = menufix;
// --> <!]>
</SCRIPT>
</Head>
<Body>
<Ul id = "nav" align = "center">
<Li> <a href = "#"> product introduction </a>
<DL align = "center">
<DD> <a href = "#"> product 1 </a> </DD>
<DD> <a href = "#"> product 1 </a> </DD>
<DD> <a href = "#"> product 1 </a> </DD>
<DD> <a href = "#"> product 1 </a> </DD>
<DD> <a href = "#"> product 1 </a> </DD>
<DD> <a href = "#"> product 1 </a> </DD>
</Dl>
</LI>
<Li> <a href = "#"> service Introduction </a>
<DL>
<DD> <a href = "#"> Service 2 </a> </DD>
<DD> <a href = "#"> Service 2 </a> </DD>
<DD> <a href = "#"> Service 2 </a> </DD>
<DD> <a href = "#"> Service 2 Service 2 </a> </DD>
<DD> <a href = "#"> Service 2, service 2 </a> </DD>
<DD> <a href = "#"> Service 2 </a> </DD>
</Dl>
</LI>
<Li> <a href = "#"> success stories </a>
<DL>
<DD> <a href = "#"> case 3 </a> </DD>
<DD> <a href = "#"> case </a> </DD>
<DD> <a href = "#"> case 3 case 3 </a> </DD>
<DD> <a href = "#"> case 3 case 3 case 3 </a> </DD>
</Dl>
</LI>
<Li> <a href = "#"> about us </a>
<DL>
<DD> <a href = "#"> ours 4 </a> </DD>
<DD> <a href = "#"> ours 4 </a> </DD>
<DD> <a href = "#"> ours 4 </a> </DD>
<DD> <a href = "#"> 4. 111 </a> </DD>
</Dl>
</DD>
<Li> <a href = "#"> online demonstration </a>
<DL>
<DD> <a href = "#"> demo </a> </DD>
<DD> <a href = "#"> demo </a> </DD>
<DD> <a href = "#"> demo </a> </DD>
<DD> <a href = "#"> demo </a> </DD>
<DD> <a href = "#"> demo </a> </DD>
<DD> <a href = "#"> demo </a> </DD>
<DD> <a href = "#"> demo </a> </DD>
<DD> <a href = "#"> demo </a> </DD>
</Dl>
</LI>
<Li> <a href = "#"> Contact Us </a>
<DL>
<DD> <a href = "#"> Contact Us </a> </DD>
<DD> <a href = "#"> contact </a> </DD>
<DD> <a href = "#"> contact </a> </DD>
<DD> <a href = "#"> contact </a> </DD>
<DD> <a href = "#"> contact </a> </DD>
<DD> <a href = "#"> contact </a> </DD>
<DD> <a href = "#"> contact </a> </DD>
</Dl>
</LI>
</Ul>
</Body>
</Html>
