Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Js css drop-down menu code</title><style>/* */.Header { MARGIN: 0px auto; WIDTH: 950px;}.Header .Logo {PADDING-LEFT: 37px; FLOAT: left}.Header .Search {PADDING-RIGHT: 38px; FLOAT: right; PADDING-TOP: 5px}.Header .Search .input {BORDER-RIGHT: #c8c8c8 1px solid; BORDER-TOP: #c8c8c8 1px solid; BORDER-LEFT: #c8c8c8 1px solid; BORDER-BOTTOM: #c8c8c8 1px solid}.Header .navb {CLEAR: both; background:#900; MARGIN: 0px auto; HEIGHT: 15px}.Header .navb TD {BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px}.Header .navb UL {FONT-SIZE: 12px; LIST-STYLE-TYPE: none; TEXT-DECORATION: none}.Header .navb LI {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-RIGHT: 2px; PADDING-TOP: 0px}.Header .navb DIV {MARGIN-TOP: 2px; FONT-SIZE: 10px; FLOAT: left; COLOR: #fff}.Header .navb LI A {DISPLAY: block; WIDTH: 76px; COLOR: #fff; LINE-HEIGHT: 29px; TEXT-ALIGN: center; TEXT-DECORATION: none}.Header .navb LI A:hover {POSITION: relative}.Header .navb LI SPAN {BORDER-TOP-WIDTH: 0px; DISPLAY: none; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px}.Header .navb LI A:hover SPAN {DISPLAY: block; LEFT: 0px; POSITION: absolute; TOP: 1px}.Header .navb LI:hover {FILTER: Alpha(opacity=90)}.Header .navb DT {BACKGROUND: none transparent scroll repeat 0% 0%}.Header .navb LI A:hover DT A {BORDER-TOP: #fff 1px solid; BACKGROUND: dd0d2f; FLOAT: left; WIDTH: 85px; LINE-HEIGHT: 22px}.Header .navb LI A:hover {BACKGROUND: #dd0d2f; COLOR: #fff; TEXT-DECORATION: none}.navS * {BORDER-RIGHT: thin; PADDING-RIGHT: 0px; BORDER-TOP: thin; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: thin; PADDING-TOP: 0px; BORDER-BOTTOM: thin; LIST-STYLE-TYPE: none}.STYLE5 {font-size: 24px}.navb LI A:hover SPAN {FILTER: Alpha(opacity=90)}.navb LI A:hover DT {FILTER: Alpha(opacity=90)}.navb LI A:hover DT A:hover {BACKGROUND: #dd0d2f; COLOR: #fff; TEXT-DECORATION: none}#navb {CLEAR: both; PADDING-LEFT: 0px; background:#900; HEIGHT: 29px;}#navb A {PADDING-RIGHT: 0px; width:90px; DISPLAY: block; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 14px; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #fff; LINE-HEIGHT: 29px; PADDING-TOP: 0px; TEXT-ALIGN: center; TEXT-DECORATION: none}#navb A:hover {BACKGROUND: #dd0d2f; COLOR: #fff; TEXT-DECORATION: none}#navb LI {FLOAT: left}#navb LI DIV {background:#900; WIDTH: 1px; HEIGHT: 29px}#navb UL {Z-INDEX: 999; POSITION: absolute}#navb UL LI {CLEAR: left; width:100px}#navb UL {DISPLAY: none}#navb LI.show UL {DISPLAY: block; BACKGROUND: #dd0d2f; FILTER: Alpha(opacity=90)}#navb LI.show LI A {PADDING-RIGHT: 0px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 0px; FONT-WEIGHT: 100; BACKGROUND: #dd0d2f; PADDING-BOTTOM: 0px; WIDTH: 100px; COLOR: #fff; LINE-HEIGHT: 22px; PADDING-TOP: 0px}#navb LI.show LI A:hover {BACKGROUND: #dd0d2f }#navb LI.show LI UL {DISPLAY: none}#navb LI LI.show UL {DISPLAY: block}/*head*/body,td,th {font-family: 宋体;font-size: 12px;color: #000000;}body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;}a:link {color: #000000;text-decoration: none;}a:visited {text-decoration: none;color: #000000;}a:hover {text-decoration: none;color: #CC0000;}a:active {text-decoration: none;}.STYLE13 {color: #FFFFFF; font-weight: bold; }.shangzhong1{height: 298px;width: 398px;border: 1px solid #CCCCCC;}.shangzhong11{background-image: url(/images/100809_2.jpg);background-repeat: repeat-x;height: 30px;width: 100%;}.shangzhong12{font-size: 14px;font-weight: bold;color: #FFFFFF;background-image: url(/images/100809_3.jpg);background-repeat: no-repeat;height: 25px;width: 80px;text-align: center;float: left;padding-top: 5px;}.shangzhong121{background-image: url(/images/100809_4.jpg);background-repeat: no-repeat;float: right;width: 50px;height: 20px;margin-top: 5px;}.shangzhong13{height: 32px;width: 380px;margin-right: 9px;margin-left: 9px;border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #000000;}.shangzhong14{float: left;height: 32px;width: 310px;overflow: hidden;line-height: 32px;text-align: left;}.shangzhong15{width: 70px;height: 32px;line-height: 32px;float: right;}.shangyou1{height: 298px;width: 248px;border: 1px solid #CCCCCC;}.shangyou2{font-size: 14px;font-weight: bold;color: #FFFFFF;background-image: url(/images/100809_5.jpg);background-repeat: no-repeat;height: 25px;width: 80px;text-align: center;float: left;padding-top: 5px;}.shangyou3{line-height: 24px;height: 25px;width: 230px;margin-right: 9px;margin-left: 9px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #CCCCCC;overflow: hidden;text-align: left;}.shangyou3 a:link,.shangyou3 a:visited{color: #0000FF;}.shangyou4{}.dabao{height: auto;width: auto;}.szuo1{height: 203px;width: 223px;border: 1px solid #CCCCCC;}.szuo11{line-height: 24px;height: 24px;width: 223px;overflow: hidden;text-align: left;}.syou1{background-image: url(/images/100809_8.jpg);background-repeat: repeat-x;height: 28px;width: 100%;}.syou2{font-size: 14px;font-weight: bold;color: #FFFFFF;background-image: url(/images/100809_7.jpg);background-repeat: no-repeat;height: 23px;width: 88px;text-align: center;float: left;padding-top: 5px;}.xx1{height: 288px;width: 310px;border: 1px solid #CCCCCC;}.xx11{line-height: 25px;height: 25px;width: 310px;overflow: hidden;text-align: left;}.xx{height: auto;width: auto;border-top-width: 3px;border-top-style: solid;border-top-color: #CCCCCC;line-height: 25px;text-align: center;}/*list*/.li0{height: auto;width: 628px;border: 1px solid #CCCCCC;padding-bottom: 10px;}.li01{height: auto;width: 948px;border: 1px solid #CCCCCC;padding-bottom: 10px;}.li1{background-image: url(/images/100809_2.jpg);background-repeat: repeat-x;height: 25px;width: 100%;padding-top: 5px;text-align: left;}.li11{height: 30px;width: 610px;margin-right: 9px;margin-left: 9px;border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #000000;}.li12{float: left;height: 30px;width: 540px;overflow: hidden;line-height: 30px;text-align: left;}.li13{width: 70px;height: 30px;line-height: 30px;float: right;}.kong{height: 10px;width: 100%;}/*del*/.del1{font-size: 20px;font-weight: bold;text-align: center;height: 35px;width: 100%;padding-top: 15px;line-height: 35px;}.del2{color: #CCCCCC;text-align: center;height: 20px;width: 100%;padding-bottom: 20px;}.del3{height: auto;width: 610px;padding-bottom: 20px;text-align: left;padding-right: 9px;padding-left: 9px;}.del31{height: auto;width: 930px;padding-bottom: 20px;text-align: left;padding-right: 9px;padding-left: 9px;}/*chanpin*/.cp1{background-image: url(/images/100809_10.jpg);height: 65px;width: 182px;background-repeat: no-repeat;}.cp2{background-image: url(/images/100809_12.jpg);height: auto;width: 182px;background-repeat: repeat-y;}.cp3{background-image: url(/images/100809_11.jpg);height: 155px;width: 182px;background-repeat: no-repeat;}.cp11{font-size: 14px;font-weight: bold;color: #0066CC;height: 20px;width: 130px;padding-top: 8px;border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: #CCCCCC;margin-right: 26px;margin-left: 26px;text-align: left;}.cp12{height: 20px;width: 130px;padding-top: 8px;border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: #CCCCCC;margin-right: 26px;margin-left: 26px;text-align: left;}.cp13{background-image: url(/images/100809_2.jpg);background-repeat: repeat-x;height: 25px;width: 100%;padding-top: 5px;text-align: right;}/*head*/.head{line-height: 20px;text-align: center;height: 20px;width: 96px;border: 2px solid #CC0000;margin-top: 6px;margin-bottom: 5px;font-size: 14px;}</style></head><body> <td height="35" valign="top"><div class=Header> <div class="sysWidth navS"> <ul class="STYLE5" id=navb> <li>First? Page<div></div> </li> <li>Company Profile<div></div> <ul> <li>Market Introduction</li> <li>Customer service</li> <li>Market advantages</li> <li>Product Service</li> <li>Contact Info</li> </ul> </li> <li>Financial products<div></div> <ul> <li>Tianjin Indium</li> <li>Tianjin magnesium</li> <li>Wolfberry</li> </ul> </li> <li>Transaction entry<div></div> <ul> <li>Warehouse ticket overview</li> <li>Entry guide</li> <li>Transaction guide</li> <li>Settlement guide</li> <li>Delivery guide</li> <li>Transaction rules</li> <li>Transaction Security</li> </ul> </li> <li>Market hotspots<div></div> <ul> <li>Market announcement</li> <li>Daily municipal evaluation</li> <li>Market Focus</li> </ul> </li> <li>Comprehensive information<div></div> <ul> <li>Financial information</li> <li>Industry News</li> <li>Mining Information</li> <li>Analysis and Prediction</li> </ul> </li> <li>Industry data<div></div> <ul> <li>Domestic market</li> <li>International market</li> <li>Import and export data</li> </ul> </li> <li>Software Download<div></div> </li> <li>Splendid home<div></div> </li> <li>Jinxiu Naxian<div></div> </li> </ul> <script language=javascript type=text/javascript>Function menuFix () {var sfEls = document. getElementById ("navb"). getElementsByTagName ("li"); for (var I = 0; I<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=(this.className.length>0? "": "") + "Show";} sfEls [I]. onmouseout = function () {this. className = this. className. replace (new RegExp ("(? | ^) Show \ B ")," ") ;}} window. onload = menuFix;</script> </div> </div></td></body></html>
Tip: you can modify some code before running
