JS实现导航菜单二级下拉菜单的三种方式

作者：青柠时间：2026-10-30 15:56:46浏览：432

本文整理并介绍了在Web开发中实现导航菜单二级下拉菜单的三种常见技术方案。第一种方法仅依赖HTML和CSS，通过伪类控制显隐，实现结构与表现分离；第二种方法使用原生JavaScript操作DOM，虽然灵活但代码较为繁琐；第三种方法借助jQuery库简化事件绑定与样式切换。文章提供了各方案的核心代码示例及引用方式，帮助开发者根据项目需求选择合适的实现路径。

引言与概述

近期对利用JavaScript实现导航栏中二级下拉菜单的三种主要实现路径进行了梳理，旨在为实际项目开发提供参考。

具体而言，如何构建导航栏中的二级下拉菜单功能？

在淘宝、搜狐等主流大型网站中，均可观察到二级下拉菜单的应用实例，例如所示的界面效果。

引言与概述

那么，如何复现类似的交互效果？实际上，至少存在三种可行的实现路径，下文将附带相关代码供参考。

纯HTML与CSS实现方案

1. 纯HTML与CSS方案


<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
/*关键一：将二级菜单设置为display：none;*/
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
/*关键二：在划过二级菜单从属的一级菜单时，设置为display:block;*/
ul li:hover ul{display: block;}
</style>
 
 
<div id="nav">
  <ul>
    <li><a href="">首页</a></li>
    <li><a href="">汽车</a>
      <ul>
        <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>
      </ul>
    </li>
    <li><a href="">联系我们</a></li>
  </ul>
</div>

该方案的优势在于较好地实现了页面结构与视觉表现的分离。

原生JavaScript实现方案

2. 原生JavaScript方案


<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
ul li ul{position: absolute;top:40px;left: 0; display:none;}
ul li ul li:hover{background: red;}
</style>
 
 
<div id="nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">汽车</a>
  <!-- 关键一：在二级标题从属的一级标题标签内设置时间执行程序，this代表的时这个li元素 -->
      <ul>
        <li><a href="#">奥迪</a> </li>
        <li><a href="#">道奇</a> </li>
      </ul>
    </li>
    <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">手机</a>
      <ul>
        <li><a href="#">小米</a> </li>
        <li><a href="#">华为</a> </li>
      </ul>
    </li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

采用原生JavaScript实现相对繁琐，且在此场景下结构与行为未完全解耦（尽管可通过JS动态创建DOM节点来尝试分离，但实现过程复杂），因此通常不推荐此方式。

jQuery库实现方案

3. 基于jQuery的方案

jQuery是一个流行的JavaScript库，开发者可从jQuery官网下载最新版本的库文件。其中压缩版适用于生产环境，未压缩版则便于开发调试。下载至本地后，需在HTML文件中引入该库文件。鉴于jQuery本质上是JavaScript，其引入方式如下：

基于jQuery实现二级下拉菜单的具体代码如下：


<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
</style>
 
 
<div id="nav">
  <ul>
    <li><a href="">首页</a></li>
    <li class="navmenu"><a href="">汽车</a>
      <ul>
        <li><a href="#">奥迪</a> </li>
        <li><a href="#">道奇</a> </li>
      </ul>
    </li>
    <li class="navmenu"><a href="">手机</a>
      <ul>
        <li><a href="#">小米</a> </li>
        <li><a href="#">华为</a> </li>
      </ul>
    </li>
    <li><a href="">联系我们</a></li>
  </ul>
</div>

由此可见，使用jQuery进行开发具有较高的便捷性。

引言与概述

最终实现的视觉效果如所示；

即当鼠标悬停于一级菜单项时，对应的二级菜单将显示出来。

感谢阅读，希望本文内容能对大家有所帮助，感谢各位对本站的支持！

作者最新文章

ES6模块化中js文件怎么用import和export交互

2026-11-05 17:00:48

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53