代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>下拉菜单</title>
  <style>
    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>
</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>
      <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>
<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) {
      ev.target.nextElementSibling.style.display = "block";
    }
  }
  // 关掉子菜单
  function closeSubMenu(ev) {
    if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
      ev.target.nextElementSibling.style.display = "none";
    }
  }
   //判断有没有元素标签A
    //  无序列表 + 事件监听 + 事件委托
</script>
</html>

效果展示

实现步骤

1.先创建一个导航
2.通过无序列表，定义好要显示的菜单
3.通过布局实现样式
4.通过事件来实现下拉效果

总结

通过子菜单的样式，理解了绝对定位、相对定位的概念。
子绝父相，即相对定位是给父级的，绝对定位的时候是给子级的

导航栏下拉菜单实战

代码如下

效果展示

实现步骤

总结

相关文章