HTML5实例之javaScript制作水平下拉菜单

HTML5实例之javaScript制作水平下拉菜单

 *{
    padding:0px;
}
  p{
    margin:20px 150px;
}
  ul{
    list-style:none;
}
  ul li{
    float:left;
    posITion:relative;
}
  ul li a{
    text-decoration:none;
      background:#900;
      height:40px;
      display:block;
      color:#fff;
      font-weight:bold;
      line-height:40px;
      text-align:center;
      margin-right:1px;
      padding:0px 15px;
  }
  ul li a:hover{
    background:#f90;
}
  ul li ul li{
    float:none;
}
  ul li ul{
    position:absolute;
    top:41px;
    left:0px;
      display:none;
  }
  function showmenu(li){
     VAR submenu=li.getelementsbytagname("ul")[0];
     submenu.style.display="block";
 }
 function hidemenu(op){
     var submenu=op.getElementsByTagName("ul")[0];
     submenu.style.display="none";
 }

HTML5实例之javaScript制作水平下拉菜单

 *{
    padding:0px;
}
  p{
    margin:20px 150px;
}
  ul{
    list-style:none;
}
  ul li{
    float:left;
    position:relative;
}
  ul li a{
    text-decoration:none;
      background:#900;
      height:40px;
      display:block;
      color:#fff;
      font-weight:bold;
      line-height:40px;
      text-align:center;
      margin-right:1px;
      padding:0px 15px;
  }
  ul li a:hover{
    background:#f90;
}
  ul li ul li{
    float:none;
}
  ul li ul{
    position:absolute;
    top:41px;
    left:0px;
      display:none;
  }
  function showmenu(li){
     var submenu=li.getElementsByTagName("ul")[0];
     submenu.style.display="block";
 }
 function hidemenu(op){
     var submenu=op.getElementsByTagName("ul")[0];
     submenu.style.display="none";
 }
    

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！