当前位置：首页 > 文章列表 > 文章 > 前端 > 简单CSS下拉菜单制作教程

简单CSS下拉菜单制作教程

2025-10-20 17:48:31 0浏览收藏

想要轻松掌握CSS下拉菜单的制作方法吗？本文为你提供一份简单易懂的教程，教你如何利用HTML构建导航结构，并巧妙地运用CSS的`:hover`伪类来实现子菜单的显示与隐藏。我们将使用无序列表来组织菜单项，并通过CSS样式默认隐藏`.submenu`，当`.has-submenu`被悬停时，子菜单即可优雅地展开。为了提升用户体验，我们还会介绍如何添加过渡效果。同时，本文也会提醒你在制作过程中需要注意移动端兼容性与可访问性问题，助你打造一个既美观又实用的CSS下拉菜单。快来学习吧，让你的网站导航更上一层楼！

先通过HTML构建导航结构，再用CSS的:hover伪类控制子菜单显示隐藏。具体实现：使用无序列表组织菜单，.submenu默认隐藏，.has-submenu:hover时显示子菜单，并可添加过渡效果提升体验。注意兼容移动端与可访问性。

如何用css制作简单下拉菜单

用 CSS 制作一个简单的下拉菜单，核心思路是利用 :hover 伪类控制子菜单的显示与隐藏。下面是一个基础但实用的实现方法。

HTML 结构

先构建清晰的导航结构，使用无序列表来组织菜单项：

<nav class="dropdown-menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li class="has-submenu">
      <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>

CSS 样式设置

关键在于隐藏子菜单，并在鼠标悬停时显示它：

.dropdown-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #f8f8f8;
}
<p>.dropdown-menu > ul > li {
display: inline-block;
position: relative;
}</p><p>.dropdown-menu a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}</p><p>/<em> 隐藏子菜单 </em>/
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border: 1px solid #ddd;
min-width: 120px;
}</p><p>.submenu li {
display: block;
}</p><p>/<em> 悬停时显示子菜单 </em>/
.has-submenu:hover .submenu {
display: block;
}</p><p>/<em> 可选：添加简单过渡效果 </em>/
.submenu {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}</p><p>.has-submenu:hover .submenu {
display: block;
opacity: 1;
visibility: visible;
}</p>