在小型网站或课程设计中，导航菜单的下拉效果是最常见的前端练习之一。很多初学者第一反应是写几行JavaScript去控制显示和隐藏，但实际上仅用CSS就可以完成一套稳定可用的下拉导航，不仅代码量少，也更利于浏览器渲染性能。
一、基础HTML结构搭建
实现下拉效果的第一步是写出语义清晰的嵌套列表。通常一级导航使用无序列表<ul>，每个菜单项<li>内部再放置一个用于二级菜单的<ul>。这种结构既方便CSS选中子元素，也符合无障碍阅读习惯。
需要注意，二级菜单在默认状态下应当隐藏，但不能使用display:none直接干掉，否则后续很难做动画。推荐先用视觉隐藏的方式处理，后面结合hover再显示。下面是一段标准结构代码：
<nav class="menu">
<ul class="level-one">
<li><a href="#">首页</a></li>
<li class="has-child">
<a href="#">产品</a>
<ul class="level-two">
<li><a href="#">Web应用</a></li>
<li><a href="#">移动应用</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
上面的代码中，class为has-child的<li>表示存在下拉项的菜单，里面的level-two就是二级菜单容器。这种命名方式在初级项目中足够直观，后期改用BEM规范也可以平滑过渡。
二、核心CSS下拉逻辑
下拉的本质是：平时二级菜单不可见，当鼠标悬停到父级<li>时，二级菜单变为可见并定位在合适位置。这里最关键的是position属性和hover伪类的配合。父级需要设置position:relative，二级菜单设置position:absolute，从而脱离文档流并相对于父项定位。
如果不加定位，二级菜单会撑开父容器导致页面跳动。同时要用z-index保证下拉层浮在内容之上，否则可能被后续模块遮挡。以下样式演示了最小可用集：
.menu .level-one > li {
position: relative;
display: inline-block;
}
.menu .level-two {
position: absolute;
top: 100%;
left: 0;
min-width: 120px;
background: #fff;
border: 1px solid #ddd;
/* 默认隐藏但保留布局能力 */
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease;
z-index: 10;
}
.menu .has-child:hover .level-two {
opacity: 1;
visibility: visible;
}
使用opacity加visibility而不是display，是为了让transition动画生效。当hover到has-child时，子菜单淡入并显示，鼠标移开则淡出隐藏。这种写法在桌面端非常顺滑，也不会出现JS时序错误。
为什么不用display切换
display:none到display:block的切换无法被CSS过渡捕获，浏览器会直接跳过中间帧。如果一定要用display，只能配合JS延时或animation关键帧，反而增加复杂度。对初级项目而言，opacity配合visibility是性价比最高的方案。
三、动画与细节优化
基础的显示隐藏做好后，可以加入轻微位移让下拉更自然。例如让二级菜单从上方滑落一点，能明显提升质感。只需在隐藏态加transform:translateY(-10px)，显示态复原即可。
此外，要防止鼠标在一级和二级之间移动时菜单闪烁，可以给二级菜单加一个透明的缓冲带，或者确保父级和子级在位置上无缝衔接。下面补充了带位移的改进样式：
.menu .level-two {
transform: translateY(-10px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.menu .has-child:hover .level-two {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
在真实项目中，还应考虑一级菜单项之间的间距，避免hover误触。可以用padding而非margin来扩大可点击区域，这样下拉触发更稳定。对于深色背景的导航，记得给二级菜单设好对比色，保证文字可读。
四、移动端兼容与局限
纯CSS hover下拉在桌面浏览器表现良好，但触屏设备没有悬停概念，点击一级菜单可能直接跳转href而非展开二级。初级项目若只面向PC演示，此方案完全够用；若需兼容手机，可配合<details>标签或媒体查询改用点击态。
另一个常见坑是z-index层叠上下文：如果导航外层设有transform或opacity，会创建新的层叠上下文，导致z-index失效。排查时可用浏览器开发者工具查看元素层级，避免在父级滥用会生成层叠上下文的属性。
| 方案 | 优点 | 缺点 |
|---|---|---|
| 纯CSS hover | 无脚本、加载快、易维护 | 触屏不支持、依赖鼠标 |
| JavaScript控制 | 兼容触屏、可延时关闭 | 代码多、需防冲突 |
综合来看，CSS初级项目实现导航下拉应以hover方案起步，理解定位与层叠原理后，再逐步引入交互增强。这样既能巩固布局基础，也方便后续向组件化演进。