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