Code :
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" </P> <p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml" lang = "ZH-CN"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <br/> <title> CSS menu demonstration </title> </P> <p> <style type =" text/CSS "> <br/> <! -- </P> <p> * {margin: 0; padding: 0; Border: 0 ;}< br/> body {<br/> font-family: Arial,, Serif; <br/> font-size: 12px; <br/>}</P> <p> # nav {<br/> line-Height: 24px; list-style-type: none; Background: #666; <br/>}</P> <p> # nav a {<br/> display: block; width: 80px; text-align: center; <br/>}</P> <p> # nav A: link {<br/> color: #666; text-Decoration: none; <br/>}< br/> # nav A: visited {<br/> color: #666; text-Decoration: none; <Br/>}< br/> # nav A: hover {<br/> color: # FFF; text-Decoration: none; font-weight: bold; <br/>}</P> <p> # nav Li {<br/> float: Left; width: 80px; Background: # CCC; <br/>}< br/> # nav Li A: hover {<br/> Background: #999; <br/>}< br/> # nav Li ul {<br/> line-Height: 27px; List-style-type: none; text-align: left; <br/> left:-999em; width: 180px; position: absolute; <br/>}< br/> # nav Li ul Li {<br/> float: left; width: 18 0px; <br/> Background: # f6f6f6; <br/>}</P> <p> # nav Li ul a {<br/> display: block; width: 156px; text-align: Left; padding-left: 24px; <br/>}</P> <p> # nav Li ul a: link {<br/> color: #666; text-Decoration: none; <br/>}< br/> # nav Li ul a: visited {<br/> color: #666; text-Decoration: none; <br/>}< br/> # nav Li ul a: hover {<br/> color: # f3f3f3; text-Decoration: none; font-weight: normal; <br/> Background: # c00; <br/>}</P> <p> # Nav Li: hover ul {<br/> left: auto; <br/>}< br/> # nav Li. sfhover ul {<br/> left: auto; <br/>}< br/># content {<br/> clear: left; <br/>}</P> <p> --> <br/> </style> </P> <p> <SCRIPT type = text/JavaScript> <! -- // --> <! [CDATA [//> <! -- <Br/> function menufix () {<br/> var sfels = document. getelementbyid ("nav "). getelementsbytagname ("Li"); <br/> for (VAR I = 0; I <sfels. length; I ++) {<br/> sfels [I]. onmouseover = function () {<br/> This. classname + = (this. classname. length> 0? "": "") + "Sfhover"; <br/>}< br/> sfels [I]. onmousedown = function () {<br/> This. classname + = (this. classname. length> 0? "": "") + "Sfhover"; <br/>}< br/> sfels [I]. onmouseup = function () {<br/> This. classname + = (this. classname. length> 0? "": "") + "Sfhover"; <br/>}< br/> sfels [I]. onmouseout = function () {<br/> This. classname = This. classname. replace (New Regexp ("(? | ^) Sfhover \ B "), </P> <p> ""); <br/>}< br/> window. onload = menufix; </P> <p> // --> <!]> </SCRIPT> </P> <p> </pead> <br/> <body> </P> <p> <ul id = "nav"> <br/> <li> <a href = "#"> product introduction </a> <br/> <ul> <br/> <li> <a href = "#"> product 1 </a> </LI> <br/> <li> <a href = "#"> product 1 </a> </LI> <br/> <LI> <a href = "#"> product 1 </a> </LI> <br/> <li> <a href = "#"> product 1 </> </LI> <br/> <li> <a href = "#"> product 1 </a> </LI> <br/> <li> <a href = "#"> product 1 </a> </LI> <br/> </ul> <br/> </LI> <br/> <li> <pref = "#"> service Introduction </a> <br/> <ul> <br/> <li> <a href = "#"> Service 2 </a> </LI> <br/> <li> <a href = "#"> Service 2 </a> </LI> <br/> <li> <a href = "#"> Service 2 </a> </LI> <br/> <li> <a href = "#"> Service 2 </a> </Li> <br/> <li> <a href = "#"> Service 2 Service 2 </a> </LI> <br/> <li> <a href = "#"> Service 2 </a> </LI> <br/> </ul> <br/> </LI> <br/> <li> <pref = "#"> success stories </a> <br/> <ul> <br/> <li> <a href = "#"> case 3 </a> </LI> <br/> <li> <a href = "#"> case </a> </LI> <br/> <li> <a href =" # "> case 3 case 3 </a> </LI> <br/> <li> <a href =" # "> case 3 case 3 </a> </LI> <br/> </ul> <br/> </LI> <br/> <li> <a href = "#"> about us </> <br/> <ul> <br/> <li> <a href = "#"> ours 4 </a> </LI> <br/> <li> <a href = "#"> ours 4 </a> </LI> <br/> <li> <a href = "#"> ours 4 </a> </LI> <br/> <li> <a href = "#"> ours 111 </a> </LI> <br/> </ul> <br/> </LI> </P> <p> <li> <a href = "#"> online demonstration </a> <br/> <ul> <br/> <li> <a href = "#"> demo </a> </LI> <br/> <li> <a href = "#"> demo </a> </LI> <br/> <li> <a href = "#"> demonstration </a> </LI> <br/> <li> <a href =" # "> demo </a> </LI> <br/> <li> <a href =" # "> demo </a> </LI> <br/> <li> <a href = "#"> demonstration </a> </LI> <br/> <li> <a href = "#"> demonstration demonstration </a> </LI> <br/> <li> <a href = "#"> demonstration </a> </LI> <br/> </ul> <br/> </LI> <br/> <li> <a href = "#"> Contact Us </a> <br/> <ul> <br/> <li> <a href = "#"> contact </a> </LI> <br/> <li> <pref = "#"> contact </a> </LI> <br/> <li> <a href = "#"> contact </a> </Li> <br/> <li> <a href = "#"> contact </a> </LI> <br/> <li> <a href = "#"> contact </a> </LI> <br/> <li> <a href = "#"> contact </a> </LI> <br/> <li> <a href = "#"> contact </a> </LI> <br/> </ul> <br/> </LI> </P> <p> </ul> </P> <p> </body> <br/> </ptml>
[Ctrl + A select all prompt: you can modify part of the code first, then click to run the Code]
