纯CSS下拉菜单制作详解

<ul class="menu">
  <li><a href="#">菜单一</a></li>
  <li>
    <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>

然后，是CSS部分。关键在于隐藏下拉菜单，并在鼠标悬停时显示它。

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 使菜单项水平排列 */
}

.menu > li {
  position: relative; /* 为子菜单定位提供参考 */
}

.menu > li > a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute; /* 绝对定位，使其脱离文档流 */
  top: 100%; /* 位于父元素底部 */
  left: 0;
  background-color: #f9f9f9;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; /* 确保下拉菜单在上方显示 */
  display: none; /* 初始状态隐藏 */
}

.submenu li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #555;
}

.menu > li:hover > .submenu {
  display: block; /* 鼠标悬停时显示 */
}

.submenu li:hover {
  background-color: #ddd;
}

这段CSS代码的核心在于.menu > li:hover > .submenu选择器。它表示当鼠标悬停在