Tip: you can modify some code before running
Level 2 cascade drop-down menu<!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><title>Level 2 cascade drop-down menu</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">Body, td, th {font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; color: #333333 ;}body {margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;} a {color: #333333; text-decoration: none;} a: hover {color: # FF0000; text-decoration: none;} a: active {color: # FF0000; text-decoration: none ;}# menu {height: 32px; margin-top: 8px; background-color: #990000 ;}# menu ul {margin: auto; width: 778px; height: 32px; list-style-type: none; padding: 0px; margin-top: 0px; margin-bottom: 0px ;}. m_li {float: left; width: 114px; line-height: 32px; text-align: center; margin-right:-2px; margin-left:-2px ;}. m_li a {display: block; color: # FFFFFF; width: 114px ;}. m_line {float: left; width: 1px; height: 32px; line-height: 32px;/* ff (vertical center of the image )*/}. m_line img {margin-top: expression (32-this. height)/2);/* valid under ie (vertical center of the image )*/}. m_li_a {float: left; width: 114px; line-height: 32px; text-align: center; padding-top: 3px; font-weight: bold; background-image: url (http://www.zzsky.cn/effect/images/200909051030/menu_bg.jpg); position: relative; height: 32px; margin-top:-3px; margin-right:-2px; margin-left:-2px ;}. m_li_a {display: block; color: # FF0000; width: 114px ;}. smenu {width: 774px; margin: 0px auto 0px auto; padding: 0px; list-style-type: none; height: 32px ;}. s_li {line-height: 32px; width: auto; display: none; height: 32px ;}. s_li_a {line-height: 32px; width: auto; display: block; height: 32px ;}</style><script language="javascript">// Initialize var def = "1"; function mover (object) {// Main menu var mm = document. getElementById ("m _" + object); mm. className = "m_li_a"; // initial main menu hiding effect if (def! = 0) {var mdef = document. getElementById ("m _" + def); mdef. className = "m_li";} // sub-menu var ss = document. getElementById ("s _" + object); ss. style. display = "block"; // hide the effect of the initial sub-menu if (def! = 0) {var sdef = document. getElementById ("s _" + def); sdef. style. display = "none" ;}} function mout (object) {// Main menu var mm = document. getElementById ("m _" + object); mm. className = "m_li"; // the initial main menu if (def! = 0) {var mdef = document. getElementById ("m _" + def); mdef. className = "m_li_a";} // sub-menu var ss = document. getElementById ("s _" + object); ss. style. display = "none"; // The initial sub-menu if (def! = 0) {var sdef = document. getElementById ("s _" + def); sdef. style. display = "block ";}}</script></head><body><!--把下面代码加到<body>与</body>之间--><div id="menu"> <ul> <li class="m_line"></li> <li id="m_1" class="m_li_a">Finance and Tax homepage</li> <li class="m_line"></li> <li id="m_2" class="m_li" onmouseover="mover(2);" onmouseout="mout(2);">Government Affairs openness</li> <li class="m_line"></li> <li id="m_3" class="m_li" onmouseover="mover(3);" onmouseout="mout(3);">Online services</li> <li class="m_line"></li> <li id="m_4" class="m_li" onmouseover="mover(4);" onmouseout="mout(4);">Announcement Center</li> <li class="m_line"></li> <li id="m_5" class="m_li" onmouseover="mover(5);" onmouseout="mout(5);">Regulatory Center</li> <li class="m_line"></li> <li id="m_6" class="m_li" onmouseover="mover(6);" onmouseout="mout(6);">Fiscal and Tax culture</li> <li class="m_line"></li> <li id="m_7" class="m_li" onmouseover="mover(7);" onmouseout="mout(7);">Special promotion</li> <li class="m_line"></li> </ul></div><div > <ul class="smenu"> <li id="s_1" class="s_li_a">Welcome to this site!</li> <li id="s_2" class="s_li" onmouseover="mover(2);" onmouseout="mout(2);">Tax Overview | organization setting | service guide | Tax Overview | tax status | webpage special effects</li> <li id="s_3" class="s_li" onmouseover="mover(3);" onmouseout="mout(3);">Download area | Upload area | apply for registration | query system | consultation complaint | satisfaction survey</li> <li id="s_4" class="s_li" onmouseover="mover(4);" onmouseout="mout(4);">Latest announcement | accounting notice</li> <li id="s_5" class="s_li" onmouseover="mover(5);" onmouseout="mout(5);">Latest policies | query of policies and regulations</li> <li id="s_6" class="s_li" onmouseover="mover(6);" onmouseout="mout(6);">Tax promotion | latest update | creation of civilization | Youth Forum | integrity classroom</li> <li id="s_7" class="s_li" onmouseover="mover(7);" onmouseout="mout(7);">Special promotion area</li> </ul></div></body></html>
Tip: you can modify some code before running
