简单实现下拉菜单的方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>下拉菜单</title>
    <style>
      /* 元素样式初始化 */
      *. {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        /* 颜色为#BBB  */
        color: #bbb;
        /* 去掉下画线连接样式 */
        text-decoration: none;
      }
      #nav {
        /* 给ul #nav 一个黑色背景 */
        background-color: black;
        /* 高度为50PX */
        height: 50px;
        /* 行高为50px */
        line-height: 50px;
      }
      li {
        /* 把li的小黑点去掉 */
        list-style: none;
        margin: 0 10px;
        float: left;
      }
      #nav > li > a:hover {
        /* 给鼠标悬停时连接加上红色 */
        color: red;
      }
      /* 给父级设置为子菜单的定位容器，转为定位元素即可 */
      #nav > li {
        position: relative;
      }
      #nav > li > ul {
        position: absolute;
        top: 50px;
        width: 90px;
        border: 1px solid #aaa;
      }
      #nav > li > ul > li a {
        display: inline-block;
        height: 50px;
        color: #444;
      }
      ul.sub li:hover {
        background-color: #eee;
      }
      /* 初始化时不显示子菜单 */
      #nav > li > ul {
        display: none;
      }
    </style>
  </head>
  <body>
    <ul id="nav">
      <li><a href="">首页</a></li>
      <li><a href="">视频教程</a></li>
      <li>
        <a href="">资源下载</a>
        <ul>
          <li><a href="">PHP工具</a></li>
          <li><a href="">在线手册</a></li>
          <li><a href="">学习课件</a></li>
          <li><a href="">网站源码</a></li>
        </ul>
      </li>
      <li><a href="">社区问答</a></li>
      <li>
        <a href="">技术文章</a>
        <ul>
          <li><a href="">头条</a></li>
          <li><a href="">博博客</a></li>
          <li><a href="">学习教程</a></li>
          <li><a href="">PHP框架</a></li>
        </ul>
      </li>
    </ul>
  </body>
  <script>
    //   获取所有的主导航
    const navs = document.querySelectorAll("#nav > li");
    navs.forEach(function (nav) {
      // 移入时 显示子菜单
      nav.addEventListener("mouseover", showSubMenu);
      //  移出时 关掉子菜单
      nav.addEventListener("mouseout", closeSubMenu);
    });
    //显示子菜单
    function showSubMenu(ev) {
      // 查看当前事件在那里触发的
      console.log(ev.target);
      //  判断有没有子菜单项
      if (ev.target.nextElementSibling !== null) {
        //给display:block、显示
        ev.target.nextElementSibling.style.display = "block";
      }
    }
    //关掉子菜单
    function closeSubMenu(ev) {
      // 判断当前触发的标签必须是A标签         判断有没有子菜单项
      if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
        ev.target.nextElementSibling.style.display = "none";
      }
    }
  </script>
</html>
相关文章
