二级菜单的简单实现

最新推荐文章于 2021-05-31 15:37:27 发布

chushiwu2371

最新推荐文章于 2021-05-31 15:37:27 发布

阅读量453

点赞数

原文链接：https://my.oschina.net/u/3643035/blog/1831696

版权

<html>
<head>
   <meta charset="utf8">
   <title>实现二级菜单</title>
   <style>
   *{
           padding:0;
           margin:0;
           }
           body{
           font-family:verdana,sans-serif;
           font-size:small;
           }
           #navigation,#navigation ul li{
           list-style-type:none;
           }
           #navigation {
           margin:20px;
           }
           #navigation li{
           float:left;
           text-align:center;
           position:relative;
           }
           #navigation li a:link,#navigation li a:vidited{
           display:block;
               text-align:center;
               color:#000;
               width:120px;
               height:40px;
               line-height:40px;
               border:1px solid #fff;
               border-width:1px 1px 0 0l
               background:#c5dbf2;
               padding-left:10px;
           }
           #navigation li a:hover{
           color:#fff;
           background:#2687eb;
           }
           #navigation li ul li a:hover{
           color:#fff;
               background:#6b839c;
           }
           #navigation li ul{
           display:none;
               posoition:absolute;
               top:40px;
               left:0px;
               margin-top:1px;
               width:120px;
           }
           #navigation li ul li ul{
           display:none;
               position:absolute;
               top:0px;
               left:130px;
               margin-top:0px;
               margin-left:1px;
               width:120px;
           }
   </style>
   <script>
   function displaySubMenu(li){e
           var subMenu = li.getElementsByTagName('ul')[0];
               subMenu.style.display = "block";
           }
           function hideSubMenu(li){
           var subMeniu = li.getElementsByTagName('ul')[0];
               subMenu.style.display = "none";
           }
   </script>
   </head>
   <body>
   <ul id="navigation">
       <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
       <a href="#">一级菜单</a>
           <ul>
           <li><a href="#">二级</a></li>
           <li><a href="#">二级</a></li>
           <li><a href="#">二级</a></li>
           <li><a href="#">二级</a></li>
           </ul>
       </li>
       <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
       <a href="#">一级菜单</a>
           <ul>
           <li><a href="#">二级</a></li>
           <li><a href="#">二级</a></li>
           <li><a href="#">二级</a></li>
           <li><a href="#">二级</a></li>
           </ul>
       </li>
       <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
       <a href="#">一级菜单</a>
           <ul>
           <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
                   <a href="#">二级菜单</a>
                   <ul>
                       <li><a href="#">三级</a></li>
                       <li><a href="#">三级</a></li>
                       <li><a href="#">三级</a></li>
                       <li><a href="#">三级</a></li>
                   </ul>
           </li>
                   <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
                   <a href="#">二级菜单</a>
                   <ul>
                       <li><a href="#">三级</a></li>
                       <li><a href="#">三级</a></li>
                       <li><a href="#">三级</a></li>
                       <li><a href="#">三级</a></li>
                   </ul>
           </li>
           </ul>
       </li>
       </ul>
   </body>
</html>