导航栏下拉菜单前端代码｜鼠标悬浮效果实现方法

本教程将带你从零开始，实现一个完整的导航栏下拉菜单，并重点讲解鼠标悬浮时菜单弹出与隐藏的交互效果。整个教程不依赖任何第三方框架，只使用原生 HTML、CSS 和少量 JavaScript，确保你理解每一个细节。

## 前言介绍

导航栏是网站的门面，而下拉菜单是导航栏中最常见的交互形式。当用户将鼠标悬停在某个导航项上时，下方弹出子菜单；鼠标移开后，子菜单自动收起。这个看似简单的效果，在实际开发中涉及到定位、层级、过渡动画以及边界情况处理。很多新手在实现时会出现菜单闪烁、无法点击子菜单、或者移动端兼容性问题。本教程将从最基础的结构搭建开始，逐步完善样式和交互逻辑，最终产出一个可直接复用到项目中的导航栏组件。

## 前置准备

你需要准备以下工具和环境：

- 一个代码编辑器，推荐 VS Code

- 一个现代浏览器，推荐 Chrome 或 Edge，用于预览效果

- 基本的 HTML 和 CSS 知识，了解选择器、盒模型和 Flex 布局即可

- 如果对 JavaScript 不熟悉，本教程也会提供纯 CSS 的替代方案

创建一个新的文件夹，命名为 `dropdown-nav`。在该文件夹内新建三个文件：`index.html`、`style.css`、`script.js`。你也可以将所有代码写在一个 HTML 文件中，但分开管理更符合工程化习惯。

## 分步操作步骤

### 1. 构建 HTML 结构

首先编写导航栏的 HTML 骨架。导航栏通常包含 Logo、菜单项和可能的操作按钮。我们需要一个 `