javascript實現控制的多級下拉菜單

2019-11-20 12:06:18

字體：大中小

來源：轉載

供稿：網友

最近身體不適，所以沒能如期的更新，抱歉。這里直接把代碼貼上，如果有不明白的地方，留言就行。

<!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>

效果圖如下：　