html+CSS+javascript 实现导航下拉菜单

代码编写流程图

html 主体架构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=yes,minimum-scale=1, maximum-scale=1.0"
    />
    <title>实现下拉菜单</title>
  </head>
  <body></body>
</html>

导航下拉菜单无序列表

<body>
  <div id="div_menu">
    <ul id="nav">
      <li><a href="">首页</a></li>
      <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="">php教程</a></li>
          <li><a href="">php小知识</a></li>
          <li><a href="">html教程</a></li>
          <li><a href="">javascript教程</a></li>
          <li><a href="">博客</a></li>
          <li><a href="">php框架</a></li>
          <li><a href="">mysql教程</a></li>
          <li><a href="">css教程</a></li>
          <li><a href="">服务器运维</a></li>
        </ul>
      </li>
      <li>
        <a href="">资源下载</a>
        <ul>
          <li><a href="">php工具</a></li>
          <li><a href="">手册下载</a></li>
          <li><a href="">js特效</a></li>
          <li><a href="">网站源码</a></li>
          <li><a href="">在线手册</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="">php词词典</a></li>
          <li><a href="">mysql词典</a></li>
          <li><a href="">Redis词曲</a></li>
          <li><a href="">javascript词典</a></li>
          <li><a href="">Bootstrap词典</a></li>
          <li><a href="">原生词典</a></li>
          <li><a href="">Linux词典</a></li>
          <li><a href="">html词典</a></li>
          <li><a href="">css词典</a></li>
          <li><a href="">jquery词典</a></li>
        </ul>
      </li>
      <li><a href="">工具下载</a></li>
      <li><a href="">PHP培训</a></li>
    </ul>
  </div>
</body>

效果图

" class="reference-link">

层叠样式表 CSS 美化实现导航菜单横向排列

各属性功能详见其后注释

<style type="text/css">
  * {
    margin: 0; /* margin属性在一个声明中设置所有外边距属性。该属性可以有1到4个值*,顺序为上右下左*/
    padding: 0; /*padding 属性在一个声明中设置所有填充属性。该属性可以有1到4个值*/
    box-sizing: border-box; /*box-sizing 是用来设置盒模型的尺寸*/
  }
  #div_menu {
    width: 100%;
  }
  a {
    color: rgb(177, 162, 162); /* 设置文本颜色 */
    /* color: red; */
    text-decoration: none; /*text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等*/
  }
  #nav {
    background-color: black; /*background-color属性设置一个元素的背景颜色*/
    height: 50px; /*height属性设置元素的高度*/
    line-height: 50px; /*line-height属性设置元素的行高*/
  }
  li {
    list-style: none; /*list-style属性在一个声明中设置所有的列表属性*/
    margin: 0 20px; /*上边距和下边距是 0px,右边距和左边距是 10px */
    float: left; /*  float（浮动），会使元素向左或向右移动, left 向左,right　向右 */
  }
  #nav > li > a {
    display: block;
    height: 48px;
  }
  #nav > li > a:hover {
    /*:hover在鼠标移到链接上时添加的特殊样式*/
    color: white;
    border-bottom: 3px solid rgb(42, 6, 248);
  }
  #nav > li {
    position: relative;
    /*position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型,relative相对定位,absolute 绝对定位,static 默认值。没有定位，元素出现在正常文档的流中*/
  }
  #nav > li > ul {
    position: absolute;
    top: 50px;
    width: 130px;
    border: 1px solid #aaa; /*设置四个边框样式*/
    border-top: none; /*设置上边框的样式*/
    background-color: rgba(248, 249, 250, 0.363); /*设置背景色*/
  }
  #nav > li > ul > li a {
    display: inline-block; /*此元素将显示为块级元素，此元素前后会带有换行符*/
    height: 50px;
    color: #444;
  }
  #nav > li > ul {
    display: none;
  }
</style>

效果图

javascript 事件监听与委托实现显示和隐藏子菜单

鼠标移入主菜单时，如果有子菜单则显示其子菜单，鼠标移出时，关掉子菜单

<script>
    window.onload = function () {
    //获取所有主导航数据
    const navs = document.querySelectorAll("#nav > li");
    // forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
    navs.forEach(function (nav) {
    //移入时显示菜单
    nav.addEventListener("mouseover", showSubMenu);
    //移出时关闭菜单
    nav.addEventListener("mouseout", closeSubMenu);
    });
    function showSubMenu(event) {
    //当前这个导航有子菜单则显示出来
    console.log(event.target.nextElementSibling);
    if (event.target.nextElementSibling !== null) {
    event.target.nextElementSibling.style.display = "block";
    }
    }
    function closeSubMenu(event) {
    //   console.log(event.target);
    console.log(event.target.nodeName);
    if (
    event.target.nodeName === "A" &&
    event.target.nextElementSibling !== null
    ) {
    event.target.nextElementSibling.style.display = "none";
    }
    }
    };
</script>