CSS初级项目如何制作下拉菜单_hover伪类和display控制显示

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS初级项目如何制作下拉菜单_hover伪类和display控制显示

2025-11-26

浏览次数：次

返回列表

答案是使用CSS的:hover伪类和display属性可创建无需J*aScript的下拉菜单。首先构建基于ul的HTML结构，通过flex布局使菜单横向排列；接着用position定位子菜单，并设display:none默认隐藏；再利用.dropdown:hover .submenu设置display:block实现悬停显示；最后可添加visibility、opacity和transition实现淡入动画，配合z-index避免遮挡问题。整个过程仅需基础CSS即可完成交互效果。

css初级项目如何制作下拉菜单_hover伪类和display控制显示

制作一个简单的下拉菜单，可以使用 CSS 的 :hover 伪类配合 display 属性来控制子菜单的显示与隐藏。这种方法不需要 J*aScript，适合 CSS 初学者练习布局和交互效果。

1. 基本 HTML 结构

下拉菜单通常基于无序列表（ul）构建，结构清晰且语义化：

<n*>
  <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>
    <li><a href="#">联系</a></li>
  </ul>
</n*>

2. 基础样式设置

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

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

3. 使用 :hover 和 display 控制下拉菜单

关键点是默认隐藏 .submenu，当鼠标悬停在父级 li 上时显示它：

语鲸

AI智能阅读辅助工具

314 查看详情

.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: #444;
  width: 150px;
  display: none; /* 默认隐藏 */
}
<p>.dropdown:hover .submenu {
display: block; /<em> 悬停时显示 </em>/
}</p>

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

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

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

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