01. 在初级项目中实现下拉菜单的学习目标
目标与适用场景
在前端初级阶段，掌握 CSS 的 :hover 与 display 的配合，可以快速实现一个基础的下拉菜单，而无需引入 Javascript。通过这种方式，可以提升页面的交互体验，同时保持代码简洁易维护。
该技术特别适用于简单的导航栏、二级菜单以及信息分组场景。核心点在于把子菜单的可见性交给 CSS 控制，让样式与布局成为唯一的交互驱动。
常见实现思路
常见做法是将下拉项放在父项的后代容器中，默认通过 display: none 隐藏，当鼠标悬停在父项时，使用 display: block 或 display: grid/inline-block 让其显现。
这个过程不依赖 JavaScript，可以在桌面端快速搭建雏形，但需要注意某些移动设备没有悬停事件，因此需要后续的无障碍处理。
02. HTML 结构要点
导航结构的基本标记
为了语义清晰，导航应使用 <ul> 与 <li>，下拉菜单作为子列表嵌套在父项内，保持层级清晰。
在结构上，父项应保留一个可定位的容器，以便子菜单能够精准定位到它的顶部边缘，形成自然的下拉效果。
可访问性与可维护性
为提升可访问性，应确保链接文本明确，并尽量避免只靠颜色来表达状态。尽管 CSS 能实现显示隐藏，键盘导航仍需关注，确保菜单项可聚焦并能通过键盘展开。
可维护性方面，保持类名清晰、层级分明，未来若要扩展二级及三级菜单，现有结构应具备可扩展性，避免过度嵌套导致样式混乱。
03. CSS 技能：:hover 与 display 的组合使用
:hover 的原理与局限
伪类 :hover 会在鼠标悬停到元素上时应用样式，适合桌面端的交互设计。它对触摸设备不一定生效，因为没有“悬停”的概念。该特性决定了下拉菜单在移动端需要其他实现思路。
在实现中，通常将下拉菜单的可见性绑定在父项的悬停状态上，通过选择器将子菜单的 display 属性从 none 改为 block，从而实现显示效果。
display 与可见性的切换要点
使用 display: none 隐藏，下拉时切换为 display: block、display: inline-block 或 display: grid。其中 block 适用于纵向菜单，inline-block 便于水平对齐，grid 适合更复杂的布局。
需要注意层级与定位关系，若父容器没有正确的定位，子菜单可能会错位。通过给父项设置 position: relative，并让子菜单使用 position: absolute，可以实现稳定的下拉对齐。
04. 实战代码演示：一个简单的导航下拉菜单
完整 HTML 结构
下面给出一个简化的导航结构示例，包含一个主菜单项和一个二级下拉菜单。结构清晰，便于在实际项目中复制使用。
<nav class="menu"><ul class="nav"><li class="item"><a href="#">首页</a></li><li class="item dropdown"><a href="#">商品</a><ul class="dropdown-menu"><li><a href="#">手机</a></li><li><a href="#">平板</a></li><li><a href="#">配件</a></li></ul></li><li class="item"><a href="#">关于我们</a></li></ul>
</nav>该结构确保了下拉菜单是 嵌套的 子列表，父项具备定位能力，便于定位子菜单。
请注意：为了提高可访问性，实际应用中还可以结合 aria 属性与键盘事件处理，但本例聚焦于纯 CSS 的实现方式。
完整 CSS 实现与交互效果
下面的 CSS 实现展示了如何通过 :hover 和 display 控制下拉菜单的显示与隐藏，同时给出常见的美化样式。
/* 基础重置与布局 */
* { box-sizing: border-box; }
.menu { background: #333; }
.nav { list-style: none; margin: 0; padding: 0; display: flex; }
.nav > li { position: relative; }/* 链接样式 */
.nav > li > a { display: block; padding: 14px 20px; color: #fff; text-decoration: none; }/* 下拉菜单的初始隐藏与定位 */
.dropdown-menu {display: none; /* 初始隐藏 */position: absolute;top: 100%; left: 0;background: #fff;min-width: 180px;border-radius: 4px;box-shadow: 0 8px 16px rgba(0,0,0,.15);overflow: hidden;
}
.dropdown-menu li a {color: #333; padding: 10px 14px; display: block; text-decoration: none;
}
.dropdown-menu li a:hover { background: #f0f0f0; }/* 悬停触发下拉显示 */
.dropdown:hover > .dropdown-menu {display: block;
}
从上面的代码可以看出，父项 .dropdown 在悬停时让子菜单 .dropdown-menu 显示出来，整体效果简洁明了。若你要在移动端实现类似功能，可能需要引入点击触发或使用 CSS 伪类配合媒体查询来适配。
为了适配更多场景，可以对下拉菜单做一些可选的调整，如：设置更高的 z-index、改变下拉方向、添加箭头指示、以及对多级菜单进行扩展。以上做法均基于 display 与 :hover 的组合，便于在初级项目中快速落地。
