如何使用CSS制作简单下拉菜单_hover与伪类结合-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-23 21:47:16

原创

738人浏览过

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

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

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

1. 基本HTML结构

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

和列表项

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

<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>
</ul>

登录后复制

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

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

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

登录后复制

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

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

音疯

音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。

178

查看详情

立即学习“前端免费学习笔记（深入）”；

.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;
}
<p>.dropdown:hover .submenu {
opacity: 1;
visibility: visible;
}

登录后复制

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