使用:hover和display实现CSS导航菜单折叠，通过HTML列表结构构建导航，CSS中默认隐藏子菜单（display: none），父级添加position: relative，子菜单设为position: absolute，利用.dropdown:hover .dropdown-menu显示下拉内容，实现鼠标悬停展开效果。
要实现一个简单的CSS导航菜单折叠效果，可以利用 :hover 伪类与 display 属性结合的方式，无需JavaScript。这种方式适合初级项目，比如静态网页或学习练习。
基本思路
通过隐藏子菜单（display: none），当用户鼠标悬停在父级菜单项上时，显示对应的子菜单（display: block）。这样就能实现简单的下拉或折叠效果。HTML结构
先构建一个清晰的导航结构，使用无序列表：
<nav class="navbar"><ul>
<li><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">产品</a>
<ul class="dropdown-menu">
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
</ul>
</li>
<li><a href="#">关于</a></li>
</ul>
</nav>
CSS样式与:hover控制显示
关键在于默认隐藏子菜单，悬停时显示：
.navbar ul {
margin: 0;
padding: 0;
list-style: none;
}
.navbar a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}
.dropdown {
position: relative;
}
.dropdown-menu {
display: none; / 默认隐藏 /
position: absolute;
top: 100%;
left: 0;
background: #f9f9f9;
border: 1px solid #ddd;
z-index: 100;
}
.dropdown:hover .dropdown-menu {
display: block; / 悬停时显示 /
}
注意事项与优化建议
- position: relative 在父级 .dropdown 上很重要，确保子菜单能相对于它定位。- 子菜单使用 position: absolute 脱离文档流，避免影响布局。
- 鼠标移出时自动收起，符合直觉，适合简单场景。
- 这种方式不支持键盘导航或移动端点击展开，仅适用于基础桌面端效果。
基本上就这些。用 :hover 和 display 结合，简单直接，适合初学者掌握CSS交互逻辑。虽然功能有限，但作为入门非常实用。
