首页 > 文章 > 前端

CSS下拉菜单制作教程：hover与display应用

时间：2026-01-13 13:32:38 487浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《CSS下拉菜单制作教程：hover与display应用》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

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

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

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

1. 基本 HTML 结构

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

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

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 上时显示它：

.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 来确保元素占据空间并可点击。

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

本篇关于《CSS下拉菜单制作教程：hover与display应用》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

前往漫画官网入口并下载 ➜