用JavaScript实现下拉菜单

来源：互联网发布：qq网络大型游戏编辑：程序博客网时间：2024/05/18 01:11
<!doctype html><html>   <head>   <meta charset="utf-8">      <title>下拉式菜单</title>      <style type="text/css">        *{margin: 0px; padding: 0px;}/*去掉默认边距*/    #menu{background: #eee;       width: 600px;       height: 40px;      margin: 0 auto;        margin-top:100px;             }        ul{ list-style: none;          }        ul li{line-height: 40px;          float: left;          text-align: center;          position: relative;/*  与下面对的position：absolute;对应*/        }        a{text-decoration: none;display: block; padding: 0 10px; height: 40px;}        a:hover{color: yellow;         background: black;           }         ul li  ul li{          float: none;          background: #eee;          margin-top: 2px;         }        ul li  ul li a{ width: 80px;}        ul li ul{          position: absolute;          left: 0;          top: 40px;           /*与上面的positon:relative;结合使用实现一级菜单的大小不随二级菜单大小而改变 */          display: none;          }        </style>      <script type="text/javascript">       function  show(li)       { var submenu=li.getElementsByTagName("ul")[0];//获得li下面的ul标签         submenu.style.display="block";       }        function  hide(li)       { var submenu=li.getElementsByTagName("ul")[0];//获得li下面的ul标签第一个ul-----从0开始数         submenu.style.display="none";       }      </script>   </head>   <body>   <div id ="menu">      <ul>          <li><a href="#">首页</a></li>          <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">最新</a>              <ul>                 <li><a href="#">首页你好</a></li><!--Google 如果这个a标签不设置大小会默认和一级菜单一样宽-->                 <li><a href="#">最新</a>                   <li><a href="#">首页</a></li>                 <li><a href="#">最新</a>              </ul>         </li>          <li  onmouseover="show(this)" onmouseout="hide(this)"><a href="#">最久</a>           <ul>                 <li><a href="#">首页</a></li>                 <li><a href="#">最新</a>                   <li><a href="#">首页</a></li>                 <li><a href="#">最新</a>              </ul></li>          <li  onmouseover="show(this)" onmouseout="hide(this)"><a href="#">图片</a>           <ul>                 <li><a href="#">首页</a></li>                 <li><a href="#">最新</a>                   <li><a href="#">首页</a></li>                 <li><a href="#">最新</a>              </ul></li>          <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">视频</a>           <ul>                 <li><a href="#">首页</a></li>                 <li><a href="#">最新</a>                   <li><a href="#">首页</a></li>                 <li><a href="#">最新</a>              </ul></li>      </ul>  </div>   </body></html>
0 0