答案是使用CSS的:hover伪类和display属性可创建无需JavaScript的下拉菜单。首先构建基于ul的HTML结构，通过flex布局使菜单横向排列；接着用position定位子菜单，并设display:none默认隐藏；再利用.dropdown:hover .submenu设置display:block实现悬停显示；最后可添加visibility、opacity和transition实现淡入动画，配合z-index避免遮挡问题。整个过程仅需基础CSS即可完成交互效果。
制作一个简单的下拉菜单，可以使用 CSS 的 :hover 伪类配合 display 属性来控制子菜单的显示与隐藏。这种方法不需要 JavaScript，适合 CSS 初学者练习布局和交互效果。
1. 基本 HTML 结构
下拉菜单通常基于无序列表（ul）构建，结构清晰且语义化：
<nav>
<ul class="menu">
<li><a href="#">首页</a></li>
<li class="dropdown">
<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>
<li><a href="#">联系</a></li>
</ul>
</nav>
2. 基础样式设置
先给菜单添加基本样式，使其横向排列，并隐藏子菜单：
.menu {
list-style: none;
padding: 0;
margin: 0;
background: #333;
display: flex;
}
<p>.menu > li {
position: relative;
}</p><p>.menu a {
display: block;
color: #fff;
text-decoration: none;
padding: 15px 20px;
}</p><p>.menu a:hover {
background: #555;
}</p>3. 使用 :hover 和 display 控制下拉菜单
关键点是默认隐藏 .submenu，当鼠标悬停在父级 li 上时显示它：
立即学习“前端免费学习笔记（深入）”；
.submenu {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
background: #444;
width: 150px;
display: none; /* 默认隐藏 */
}
<p>.dropdown:hover .submenu {
display: block; /<em> 悬停时显示 </em>/
}</p>4. 可选：添加一点过渡动画
虽然 display 不能直接加过渡动画，但你可以结合 opacity 和 visibility 实现淡入淡出效果（进阶技巧）：
.submenu {
...
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
}
<p>.dropdown:hover .submenu {
visibility: visible;
opacity: 1;
display: block;
}</p>注意：如果使用 visibility + opacity，仍需设置 display: block 来确保元素占据空间并可点击。
基本上就这些。通过简单的 :hover 和 display 控制，就能实现一个干净实用的下拉菜单，适合静态网站或学习项目。不复杂但容易忽略细节，比如定位和层级，建议加上 z-index 防止被其他元素遮挡。
