分享一个javascript 实现的多级下拉菜单-js教程-PHP中文网

分享一个javascript 实现的多级下拉菜单

php中文网

发布： 2016-06-01 09:54:36

原创

1088人浏览过

<code class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      下拉菜单
    </title>
    <meta http-equiv="content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
      .navi ul { 
          padding: 0; 
          list-style-type: none; 
      } 
      .navi ul li { 
          text-align:center;  
          float: left; 
          position: relative; 
          width: 200px; 
          background-color:#0F8CFF; 
      } 
      a { 
          color: #086808; 
          text-decoration: none; 
      } 
      .navi ul li a {
          display: block; 
          border: 1px solid #fff; 
      } 
      .navi ul li ul {  
          display: none;
          left: 0; 
      } 
      .navi ul li ul li ul{ 
          position: absolute; 
          left:200px; top: 0;
      } 
      .navi ul li:hover ul a { 
          color: yellow; 
      }
    </style>
    <script type="text/javascript">
      function showNextMenu(obj) {
        var nextMenu = obj.getElementsByTagName("ul")[0];
        nextMenu.style.display = "block";
      }
      function hideNextMenu(obj) {
        var nextMenu = obj.getElementsByTagName("ul")[0];
        nextMenu.style.display = "none";
      }
    </script>
  </head>
  
  <body>
    <div class="navi">
      <ul>
        <li class="li_1" onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
          <a href="javascript:;">
            游戏
          </a>
          <ul>
            <li onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
              <a href="javascript:;">
                传奇
              </a>
              <ul>
                <li>
                  <a href="javascript:;">
                    1
                  </a>
                </li>
                <li>
                  <a href="javascript:;">
                    2
                  </a>
                </li>
                <li>
                  <a href="javascript:;">
                    3
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a href="javascript:;">
                传奇
              </a>
            </li>
            <li>
              <a href="javascript:;">
                传奇
              </a>
            </li>
            <li>
              <a href="javascript:;">
                传奇
              </a>
            </li>
            <li>
              <a href="javascript:;">
                传奇
              </a>
            </li>
          </ul>
        </li>
        <li class="li_1">
          <a href="javascript:;">
            游戏
          </a>
          <ul>
            <li>
              <a href="javascript:;">
                传奇
              </a>
            </li>
          </ul>
        </li>
        <li class="li_1">
          <a href="javascript:;">
            游戏
          </a>
          <ul>
            <li>
              <a href="javascript:;">
                传奇
              </a>
            </li>
          </ul>
        </li>
        <li class="li_1">
          <a href="javascript:;">
            游戏
          </a>
          <ul>
            <li>
              <a href="javascript:;">
                传奇
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>

</html></code>

登录后复制

以上所述就是本文的全部内容了，希望大家能够喜欢。

网龙b2b仿阿里巴巴电子商务平台

本系统经过多次升级改造，系统内核经过多次优化组合，已经具备相对比较方便快捷的个性化定制的特性，用户部署完毕以后，按照自己的运营要求，可实现快速定制会费管理，支持在线缴费和退费功能财富中心，管理会员的诚信度数据单客户多用户登录管理全部信息支持审批和排名不同的会员级别有不同的信息发布权限企业站单独生成，企业自主决定更新企业站信息留言、询价、报价统一管理，分系统查看分类信息参数化管理，支持多样分类信息，