js实现弹出式菜单
body{
}
margin:0;
}
#wrap{ font-size:15px; } #nav{ margin:0 0 0 0; padding: 3px 0; line-height: normal; font-size:15px; width: 100%px;}#nav ul{ padding: 0; margin:0; list-style: none;}#nav li{ display: inline; margin:0; padding:0; background-color:White;}#nav a{ float:left; margin:0; padding: 0 0 0 2px; background-color: white; text-decoration: none;}#nav a span{ display: block; margin:0; color: #000000; padding: 5px 13px 3px 13px; background-color:Gray;}#nav a:hover{ background-color: #FFFFFF;}#nav a:hover span{ background-color: #00CCFF; color:#FFFFFF;}#nav #selected{ background-color:#00CCFF; color: #FFFFFF;}#subnav{ margin: 0; padding:0; width: 100%; height: 25px;}#sub_nav_3{ background-color:#00CCFF; color: #FFFFFF; padding:4px 5px 4px 30px;}#sub_nav_3 a{ color: #FFFFFF; font-size: 13px;}
function fetch_object(idname){ var my_obj = document.getElementById(idname); return my_obj;}function wskm_nav(obj){ for (i = 1; i<= 10; i++ )
{
var sub_nav = fetch_object("sub_nav_" + i); if (obj == i) { sub_nav.style.display = "block";
} else { sub_nav.style.display="none"; } }}
<!-- 主导行栏开始 --> <div id="nav"> <ul> <li><a href="#"><span id="selected" onmouseover="javasrcipt:wskm_nav(1)">首页</span></a></li> <li><a href="#"><span onmouseover="javasrcipt:wskm_nav(2)">云南旅游</span></a></li> <li><a href="#"><span onmouseover="javasrcipt:wskm_nav(3)">云南酒店</span></a></li> <li><a href="#"><span onmouseover="javasrcipt:wskm_nav(4)">云南美食</span></a></li> <li><a href="#"><span onmouseover="javasrcipt:wskm_nav(5)">云南风光</span></a></li> <li><a href="#"><span onmouseover="javasrcipt:wskm_nav(6)">云南风情</span></a></li> <li><a href="#"><span onmouseover="javasrcipt:wskm_nav(7)">云南特产</span></a></li> <li><a href="#"><span onmouseover="javasrcipt:wskm_nav(8)">票务中心</span></a></li> <li><a href="#"><span onmouseover="javasrcipt:wskm_nav(9)">会议会展</span></a></li> <li><a href="#"><span onmouseover="javasrcipt:wskm_nav(10)">客户留言</span></a></li> </ul> </div> <!-- 主导行栏结束 --> <!-- 次导行栏开始 --> <div id="subnav"> <div id="sub_nav_1" style="display:none;"></div> <div id="sub_nav_2" style="display:none;"></div> <div id="sub_nav_3" style="display:none;"> <a href="#">昆明</a> | <a href="#">丽江</a> | <a href="#">版纳</a> | <a href="#">迪庆</a> | <a href="#">德宏</a> | <a href="#">曲靖</a> | <a href="#">思茅</a> | <a href="#">玉溪</a> | <a href="#">临沧</a> | <a href="#">保山</a> | <a href="#">红河</a> | <a href="#">大理</a> </div> <div id="sub_nav_4" style="display:none;"> <a href="#">昆</a> | <a href="#">丽江</a> | <a href="#">版纳</a> | <a href="#">迪庆</a> | <a href="#">德宏</a> | <a href="#">曲靖</a> | <a href="#">思茅</a> | <a href="#">玉溪</a> | <a href="#">临沧</a> | <a href="#">保山</a> | <a href="#">红河</a> | <a href="#">大理</a> </div> <div id="sub_nav_5" style="display:none;"> <a href="#">昆明</a> | <a href="#">丽</a> | <a href="#">版纳</a> | <a href="#">迪庆</a> | <a href="#">德宏</a> | <a href="#">曲靖</a> | <a href="#">思茅</a> | <a href="#">玉溪</a> | <a href="#">临沧</a> | <a href="#">保山</a> | <a href="#">红河</a> | <a href="#">大理</a> </div> <div id="sub_nav_6" style="display:none;"> <a href="#">昆明</a> | <a href="#">丽江</a> | <a href="#">纳</a> | <a href="#">迪庆</a> | <a href="#">德宏</a> | <a href="#">曲靖</a> | <a href="#">思茅</a> | <a href="#">玉溪</a> | <a href="#">临沧</a> | <a href="#">保山</a> | <a href="#">红河</a> | <a href="#">大理</a> </div> <div id="sub_nav_7" style="display:none;"> <a href="#">昆明</a> | <a href="#">丽江</a> | <a href="#">版纳</a> | <a href="#">庆</a> | <a href="#">德宏</a> | <a href="#">曲靖</a> | <a href="#">思茅</a> | <a href="#">玉溪</a> | <a href="#">临沧</a> | <a href="#">保山</a> | <a href="#">红河</a> | <a href="#">大理</a> </div> <div id="sub_nav_8" style="display:none;"></div> <div id="sub_nav_9" style="display:none;"></div> <div id="sub_nav_10" style="display:none;"></div> </div> <!-- 次导行栏结束 -->