如何使用CSS制作简单下拉菜单_hover与伪类结合

P粉602998670 2025-11-23 00:00:00 次阅读

答案：使用CSS的:hover伪类控制子菜单显示，通过HTML无序列表构建结构，设置position定位子菜单，默认用display:none隐藏，悬停时显示。可添加opacity过渡提升视觉效果，注意父级相对定位及兼容性问题。

使用CSS制作简单的下拉菜单，可以通过 :hover 伪类结合HTML结构来实现，无需JavaScript。核心思路是当鼠标悬停在父级菜单项上时，显示其隐藏的子菜单。下面是一个清晰、实用的实现方法。

1. 基本HTML结构

下拉菜单通常使用无序列表

和列表项

构建，结构清晰且语义化。


  首页
  
    产品
    
      产品一
      产品二
      产品三
    
  
  关于

2. 使用CSS隐藏和显示子菜单

默认隐藏子菜单，利用 :hover 控制显示状态。

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #333;
}
.menu > li {
display: inline-block;
position: relative;
}
.menu a {
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
/ 隐藏子菜单 /
.submenu {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
background: #444;
width: 150px;
display: none; / 默认隐藏 /
}
.submenu li {
text-align: left;
}
.submenu a {
padding: 10px;
}
/ 悬停时显示子菜单 /
.dropdown:hover .submenu {
display: block; / 显示下拉菜单 /
}

3. 可选优化：添加过渡效果

让下拉更自然，可使用 opacity 和 visibility 结合 transition。

.submenu {
  /* 替换 display: none/block */
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  background: #444;
  width: 150px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.dropdown:hover .submenu {
opacity: 1;
visibility: visible;
}

这样能实现淡入淡出效果，视觉体验更好。