目标：模仿PHP中文网头部下拉菜单，如图所示

运用技术

1.列表；
2.css
3.js的鼠标移入与移除的监听时间

代码展示

1.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>
  </body>

2.css部分：

<style>
    /* 元素样式初始化: 学到盒模型再详细介绍 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    a {
      /* color: rgba(255, 255, 255, 0.7); */
      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>

3.js部分：

  <script>
    const navs = document.querySelectorAll("#nav > li");
    navs.forEach(function (nav) {
      //鼠标移入菜单监听事件
      nav.addEventListener("mouseover", show);
      //鼠标移出菜单监听事件
      nav.addEventListener("mouseout", out);
    });
    //显示子菜单
    function show(ev) {
      if (ev.target.nextElementSibling !== null) {
        ev.target.nextElementSibling.style.display = "block";
      }
    }
    //关闭子菜单
    function out(ev) {
      if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
        ev.target.nextElementSibling.style.display = "none";
      }
    }
  </script>