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><title>Chinese webmaster sky-webpage special effects-navigation menu-very beautiful level-2 drop-down navigation menu</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css"><!--/*全局样式*/*{font-size:12px;}body{margin:0;padding:0;background-color:#FFFFFF;font-size:12px;color:#666666;font-family: "宋体",Arial, Helvetica, sans-serif;}/*主导航菜单*/#menu ul{padding:0;border:0;list-style:none;line-height:150%;margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 15px;}#menu_out{width:966px;padding-left:4px;margin-left:auto;margin-right:auto;background:url(yun_qi_img/menu_left.gif) no-repeat left top;}#menu_in{background:url(yun_qi_img/menu_right.gif) no-repeat right top;padding-right:4px;}#menu{background:url(yun_qi_img/menu_bg.gif) repeat-x;height:73px;}.menu_line{background:url(yun_qi_img/menu_line.gif) no-repeat center top;width:8px;}.menu_line2{background:url(yun_qi_img/menu_line2.gif) no-repeat center top;width:15px;}#nav{padding-left:20px;}#nav li{float:left;height:35px;}#nav li a{float:left;display:block;padding-left:6px;height:35px;background:url(yun_qi_img/menu_on_left.gif) no-repeat left top;cursor:pointer;text-decoration:none;}#nav li a span{float:left;padding:11px 14px 10px 10px;line-height:14px;background:url(yun_qi_img/menu_on_right.gif) no-repeat right top;font-size:14px;font-weight:bold;color:#FFFFFF;text-decoration:none;}#nav li .nav_on{/*鼠标经过时变换背景，方便JS获取样式*/background-position:left 100%;}#nav li .nav_on span{/*鼠标经过时变换背景，方便JS获取样式*/background-position:right 100%;color:#333333;text-decoration:none;padding:14px 14px 7px 10px;}/*子栏目*/#menu_con{text-align:left;padding-left:20px;clear:both;}#menu_con li{float:left;height:22px;margin-top:8px;}#menu_con li a{display:block;float:left;background:url(yun_qi_img/menu_on_left2.gif) no-repeat left top;cursor:pointer;padding-left:3px;}#menu_con li a span{float:left;padding:6px 10px 4px 10px;line-height:12px;background:url(yun_qi_img/menu_on_right2.gif) no-repeat right top;}#menu_con li a:hover{text-decoration:none;background:url(yun_qi_img/menu_on_left2.gif) no-repeat left bottom;}#menu_con li a:hover span{background:url(yun_qi_img/menu_on_right2.gif) no-repeat right bottom;}#a{width:970px;font-size:14px;text-align:center;color:#000000;margin-right:auto;margin-left:auto;margin-top:0px;margin-bottom:0px;}--></style></head><body><!--把下面代码加到<body>与</body>之间--><script language="javascript">Function qiehuan (num) {for (var id = 0; id <= 9; id ++) {if (id = num) {document. getElementById ("qh_con" + id ). style. display = "block"; document. getElementById ("mynav" + id ). className = "nav_on";} else {document. getElementById ("qh_con" + id ). style. display = "none"; document. getElementById ("mynav" + id ). className = "";}}}</script> <div id="menu_out"> <div id="menu_in"> <div id="menu"> <ul id="nav"> <li>First page</li> <li class="menu_line"></li> <li>AAAAAA</li> <li class="menu_line"></li> <li>BBBBBB</li> <li class="menu_line"></li> <li>CCCCCC</li> <li class="menu_line"></li> <li>DDDDDD</li> <li class="menu_line"></li> <li>EEEEEE</li> <li class="menu_line"></li> <li>FFFFFF</li> <li class="menu_line"></li> <li>GGGGGG</li> <li class="menu_line"></li> <li>HHHHHH</li> <li class="menu_line"></li> <li>IIIIII</li> <li class="menu_line"></li> </ul> <div id="menu_con"><div id="qh_con0" > <ul> <li>Chinese webmaster Sky</li> <li class="menu_line2"></li> <li>Cola Cat</li> </ul> </div> <div id="qh_con1" > <ul> <li>A1</li> <li class="menu_line2"></li> <li>A2</li> </ul> </div> <div id="qh_con2" > <ul> <li>B1</li> <li class="menu_line2"></li> <li>B2</li> </ul> </div> <div id="qh_con3" > <ul> <li>C1</li> <li class="menu_line2"></li> <li>C2</li> </ul> </div> <div id="qh_con4" > <ul> <li>D1</li> <li class="menu_line2"></li> <li>D2</li> </ul> </div> <div id="qh_con5" > <ul> <li>E1</li> <li class="menu_line2"></li> <li>E2</li> </ul> </div> <div id="qh_con6" > <ul> <li>F1</li> <li class="menu_line2"></li> <li>F2</li> </ul> </div> <div id="qh_con7" > <ul> <li>G1</li> <li class="menu_line2"></li> <li>G2</li> </ul> </div> <div id="qh_con8" > <ul> <li>H1</li> <li class="menu_line2"></li> <li>H2</li> </ul> </div> <div id="qh_con9" > <ul> <li>I1</li> <li class="menu_line2"></li> <li>I2</li> </ul> </div> </div> </div></div></body></html>
Tip: you can modify some code before running
