CSS 下拉菜单

下拉菜单通常是在导航项下再嵌套一个列表，默认隐藏，鼠标悬停在父项上时显示。用 CSS 的 display 或 visibility + :hover 即可实现，无需 JavaScript（若需点击触发或移动端需另行处理）。

基本 HTML 结构

<nav class="menu">
  <ul>
    <li><a href="/">首页</a></li>
    <li class="dropdown">
      <a href="/products">产品</a>
      <ul class="dropdown-content">
        <li><a href="/products/a">产品 A</a></li>
        <li><a href="/products/b">产品 B</a></li>
      </ul>
    </li>
    <li><a href="/contact">联系</a></li>
  </ul>
</nav>

---

核心思路

1. 父项 li 设 position: relative，下拉层设 position: absolute，这样下拉层相对父项定位。
2. 下拉层默认 display: none（或 visibility: hidden + opacity: 0）。
3. 父项 :hover 时，下拉层 display: block（或 visibility + opacity 显示）。

---

基础 CSS 示例

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background: #333;
}

.menu > ul > li {
  position: relative;
}

.menu a {
  display: block;
  padding: 14px 20px;
  color: white;
  text-decoration: none;
}

.menu a:hover {
  background: #555;
}

/* 下拉层 */
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}

.dropdown-content a {
  color: #333;
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
}

.dropdown-content a:hover {
  background: #f5f5f5;
}

/* 悬停父项时显示 */
.dropdown:hover .dropdown-content {
  display: block;
}

---

细节说明

• position: relative 在带下拉的 li 上，position: absolute 在 .dropdown-content 上，这样下拉层以该 li 为参考定位。
• top: 100% 表示紧贴父项底部；left: 0 与父项左对齐，可按需改为 right: 0 或居中。
• 若希望有过渡动画，可用 visibility + opacity 配合 transition，避免用 display（display 无法做平滑过渡）。

---

小结

• 结构：导航 ul > li，有下拉的 li 内再放 ul.dropdown-content。
• 父项 position: relative，下拉层 position: absolute、默认 display: none。
• 父项 :hover 时让 .dropdown-content 变为 display: block 即可显示下拉菜单。

下一节学习 CSS 提示工具。