使用:hover和display实现CSS导航菜单折叠,通过HTML列表结构构建导航,CSS中默认隐藏子菜单(display: none),父级添加position: relative,子菜单设为position: absolute,利用.dropdown:hover .dropdown-menu显示下拉内容,实现鼠标悬停展开效果。

要实现一个简单的CSS导航菜单折叠效果,可以利用 :hover 伪类与 display 属性结合的方式,无需JavaScript。这种方式适合初级项目,比如静态网页或学习练习。
基本思路
通过隐藏子菜单(display: none),当用户鼠标悬停在父级菜单项上时,显示对应的子菜单(display: block)。这样就能实现简单的下拉或折叠效果。HTML结构
先构建一个清晰的导航结构,使用无序列表:
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交互逻辑。虽然功能有限,但作为入门非常实用。










