html代码如下

  <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="">PHP教程</a></li>
          <li><a href="">PHP框架</a></li>
        </ul>
      </li>
    </ul>
    <script>
      //获取所有的主导航
      const zhudaohang = document.querySelectorAll("#nav > li");
      //鼠标进入的情况下检查菜单有没有子菜单，有的话显示子菜单
      zhudaohang.forEach(function (xxx) {
        //鼠标进入时显示子菜单
        xxx.addEventListener("mouseover", xianshi);
        //注册鼠标离开的时候的事件
        xxx.addEventListener("mouseout", guanbi);
      });
      //显示子菜单
      function xianshi(xx) {
        //当前的导航有没有子菜单
        if (xx.target.nextElementSibling !== null) {
          xx.target.nextElementSibling.style.display = "block";
        }
      }
      //关闭子菜单
      function guanbi(xx) {
        //当前的导航有没有子菜单,有的话就显示子菜单
        if (
          xx.target.nodeName === "A" &&
          xx.target.nextElementSibling !== null
        ) {
          xx.target.nextElementSibling.style.display = "none";
        }
      }
      //   function guanbi(xx) {
      //     //当前的导航有没有子菜单，有的话就隐藏子菜单
      //     if (xx.target.nextElementSibling !== null) {
      //       xx.target.nextElementSibling.style.display = "none";
      //     }
      //   }
    </script>
  </body>

css代码如下

    <style>
      /* 元素样式初始化:学到盒模型再详细介绍 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        color: #bbb;
        text-decoration: none;
      }
      #nav {
        background-color: black;
        height: 50px;
        line-height: 50px;
      }
      li {
        list-style: none;
        margin: 0 10px;
        float: left;
      }
      #nav > li > a:hover {
        color: white;
      }
      /* 将父级设置为子菜单的定位容器，即转为定位元素即可 */
      #nav > li {
        position: relative;
      }
      #nav > li > ul {
        position: absolute;
        top: 50px;
        width: 180px;
        border: 1px solid #aaa;
        border-top: none;
      }
      #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>