17370845950

答案是使用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）构建，结构清晰且语义化：

2. 基础样式设置

先给菜单添加基本样式，使其横向排列，并隐藏子菜单：

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #333;
  display: flex;
}
.menu > li {
position: relative;
}
.menu a {
display: block;
color: #fff;
text-decoration: none;
padding: 15px 20px;
}
.menu a:hover {
background: #555;
}

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; /* 默认隐藏 */
}
.dropdown:hover .submenu {
display: block; / 悬停时显示 /
}

4. 可选：添加一点过渡动画

虽然 display 不能直接加过渡动画，但你可以结合 opacity 和 visibility 实现淡入淡出效果（进阶技巧）：

.submenu {
  ...
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dropdown:hover .submenu {
visibility: visible;
opacity: 1;
display: block;
}

注意：如果使用 visibility + opacity，仍需设置 display: block 来确保元素占据空间并可点击。

基本上就这些。通过简单的 :hover 和 display 控制，就能实现一个干净实用的下拉菜单，适合静态网站或学习项目。不复杂但容易忽略细节，比如定位和层级，建议加上 z-index 防止被其他元素遮挡。