先通过HTML构建导航结构，再用CSS的:hover伪类控制子菜单显示隐藏。具体实现：使用无序列表组织菜单，.submenu默认隐藏，.has-submenu:hover时显示子菜单，并可添加过渡效果提升体验。注意兼容移动端与可访问性。
用 CSS 制作一个简单的下拉菜单，核心思路是利用 :hover 伪类控制子菜单的显示与隐藏。下面是一个基础但实用的实现方法。
HTML 结构
先构建清晰的导航结构，使用无序列表来组织菜单项：
<nav class="dropdown-menu"> <ul> <li><a href="#">首页</a></li> <li class="has-submenu"> <a href="#">产品</a> <ul class="submenu"> <li><a href="#">产品一</a></li> <li><a href="#">产品二</a></li> <li><a href="#">产品三</a></li> </ul> </li> <li><a href="#">关于我们</a></li> </ul> </nav>
CSS 样式设置
关键在于隐藏子菜单，并在鼠标悬停时显示它：
知网AI智能写作
38
知网AI智能写作，写文档、写报告如此简单
38
查看详情
.dropdown-menu ul {
list-style: none;
margin: 0;
padding: 0;
background: #f8f8f8;
}
<p>.dropdown-menu > ul > li {
display: inline-block;
position: relative;
}</p><p>.dropdown-menu a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}</p><p>/<em> 隐藏子菜单 </em>/
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border: 1px solid #ddd;
min-width: 120px;
}</p><p>.submenu li {
display: block;
}</p><p>/<em> 悬停时显示子菜单 </em>/
.has-submenu:hover .submenu {
display: block;
}</p><p>/<em> 可选：添加简单过渡效果 </em>/
.submenu {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}</p><p>.has-submenu:hover .submenu {
display: block;
opacity: 1;
visibility: visible;
}</p>
优化与注意事项
为了让下拉菜单更友好，可以注意以下几点：
立即学习“前端免费学习笔记（深入）”；
- 确保子菜单有足够间距，避免误触
- 添加边框或阴影提升视觉层次
- 在移动端考虑点击展开的问题（CSS 单靠 :hover 不够）
- 保持键盘可访问性，必要时结合 JavaScript 增强交互
基本上就这些。纯 CSS 下拉菜单适合静态网站或简单场景，结构清晰、维护方便。
相关标签：
css javascript java html JavaScript css html 伪类
大家都在看：
如何通过css实现文字闪烁动画
css布局子元素伸缩比例控制
css引入外部样式与缓存优化技巧
css响应式轮播图图片自适应
在css中Animate.css与hover结合使用
css布局子元素伸缩比例控制
css引入外部样式与缓存优化技巧
css响应式轮播图图片自适应
在css中Animate.css与hover结合使用
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容