HTML 第二课下拉菜单

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <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;
      }
      /* :hover 选择鼠标指针浮动在其上的元素，并设置其样式： */
      #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>
  </head>
  <body>
    <ul id="nav">
      <li><a href="">首页</a></li>
      <li><a href="">视频教程</a></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>
      <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="">php培训</a></li>
    </ul>
  </body>
  <script>
    const navs = document.querySelectorAll("#nav > li");
    navs.forEach(function (nav) {
      //鼠标在标签上时事件
      nav.addEventListener("mouseover", showSubMenu);
      //鼠标在标签离开时事件
      nav.addEventListener("mouseout", hideSubMenu);
    });
    function showSubMenu(ev) {
      // ev.arget 事件属性可返回事件的目标节点（触发该事件的节点）
      // nextElementSibling 属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；
      if (ev.target.nextElementSibling !== null) {
        ev.target.nextElementSibling.style.display = "block";
      }
    }
    function hideSubMenu(ev) {
      // nodeName 属性指定节点的节点名称。
      if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
        ev.target.nextElementSibling.style.display = "none";
      }
    }
  </script>
</html>
相关文章
