首页 > 文章 > 前端

CSS新手必看：制作悬浮菜单教程

时间：2025-10-12 12:36:30 379浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《CSS新手如何制作悬浮菜单效果》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

通过CSS :hover伪类实现悬浮菜单，首先构建导航结构，利用position定位子菜单并默认隐藏，再通过:hover触发显示，结合opacity和visibility添加过渡动画，确保父级相对定位以正确显示下拉内容。

css初学者如何实现悬浮菜单效果

实现悬浮菜单效果对CSS初学者来说是一个实用又直观的练习。核心思路是利用CSS的 :hover 伪类，控制子元素的显示与隐藏。下面一步步带你完成一个简单的下拉式悬浮菜单。

1. 基本HTML结构

先搭建一个基础的导航结构，包含主菜单项和下拉子菜单：

<nav class="menu">
  <ul>
    <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>
</nav>

2. 基础CSS样式

给菜单设置基本样式，让主菜单横向排列，并隐藏子菜单：

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #333;
  display: flex;
}
<p>.menu a {
color: white;
text-decoration: none;
padding: 12px 16px;
display: block;
}</p><p>.menu li {
position: relative;
}</p><p>/<em> 隐藏下拉菜单 </em>/
.submenu {
position: absolute;
top: 100%;
left: 0;
background: #444;
list-style: none;
padding: 0;
margin: 0;
min-width: 150px;
display: none; /<em> 默认隐藏 </em>/
}</p><p>.submenu li a {
padding: 10px;
}</p>

3. 使用:hover显示子菜单

当鼠标悬停在“产品”这一项时，显示其子菜单：

.dropdown:hover .submenu {
  display: block; /* 悬浮时显示 */
}

这里的关键是 .dropdown:hover .submenu —— 表示当带有 dropdown 类的

被悬停时，其内部的 .submenu 显示出来。

4. 添加过渡动画（可选）

让菜单出现更自然，可以加一点淡入或滑动效果：

.submenu {
  opacity: 0;
  visibility: hidden;
  top: 120%; /* 稍微下移，留出间隙 */
  transition: opacity 0.3s, visibility 0.3s;
}
<p>.dropdown:hover .submenu {
opacity: 1;
visibility: visible;
display: block;
}</p>

使用 opacity 和 visibility 搭配过渡，比直接用 display 更适合动画。

基本上就这些。掌握 :hover 和 display/position 的配合，就能做出清晰的悬浮菜单。不复杂但容易忽略细节，比如定位上下文（父级设 position: relative）和层级问题（必要时加 z-index）。多练习几次就能熟练了。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS新手必看：制作悬浮菜单教程》文章吧，也可关注golang学习网公众号了解相关技术文章。