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>
        <!-- 次导行栏结束 -->

转载于:https://www.cnblogs.com/ddr888/archive/2006/12/15/593515.html