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>

实际效果

总结刚学完这节课晕晕的，回放看了几遍，陌生命令仔细研究了一遍，感觉熟悉了很多

Correcting teacher：

WJ

Correction status：qualified

Teacher's comments：写的不错！不懂的多看看视频手册

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

JavaScript forEach() 方法

2020-06-13 21:00:55

html代码如下

css代码如下

实际效果

总结 刚学完这节课晕晕的，回放看了几遍，陌生命令仔细研究了一遍，感觉熟悉了很多

总结刚学完这节课晕晕的，回放看了几遍，陌生命令仔细研究了一遍，感觉熟悉了很多