如何让导航栏下拉框在鼠标悬停时保持显示？

问题 #

导航栏中，鼠标悬停在菜单上时下拉框正常显示，但鼠标移到下拉框上时下拉框立刻消失，推测是菜单与下拉框间的间隙导致菜单失去悬停状态，触发下拉框恢复display: none。

原因 #

当前CSS通过<a>标签的hover状态控制下拉框显示，当鼠标从<a>移到下拉框时，<a>不再处于hover状态，下拉框随之隐藏。另外选择器a:hover + .dropdownda仅作用于<a>的直接兄弟元素，无法覆盖下拉框内的hover场景。

解决方案 #

将hover事件绑定到父元素<li>上，这样鼠标在<li>及其所有子元素（包括下拉框）上时，都能维持hover状态；同时统一下拉框类名，简化代码。

修改后的CSS代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.navbar {
  background-color: darkgray;
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3%;
}

.logo {
  font-size: 28px; /* 补全之前缺失的字体大小 */
}

.navbar ul {
  display: flex;
  list-style-type: none;
}

.navbar ul li {
  padding: 10px 25px;
  position: relative;
}

.navbar ul li a {
  color: black;
  text-decoration: none;
  font-size: 22px;
}

.navbar ul li:hover a {
  color: purple; /* 改为li hover时改变a的颜色 */
}

/* 统一下拉框样式 */
.dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: darkgray;
}

/* 当li hover时显示下拉框 */
.navbar ul li:hover .dropdown {
  display: block;
}

.dropdown ul {
  display: block;
  margin: 10px;
  text-align: center;
}

.dropdown ul li {
  width: 180px;
  padding: 10px;
}

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Be Aware - First Response</title>
</head>
<body>
  <div class="navbar">
    <h1 class="logo">BE AWARE</h1>
    
    <ul>
      <li>
        <a href="#">Drug Advocacy</a>
        <div class="dropdown"> <!-- 统一类名为dropdown -->
          <ul>
            <li><a href="#">Drug Awareness</a></li>
            <li><a href="#">Types of Drugs</a></li>
            <li><a href="#">Abuse and Prevention</a></li>
          </ul>
        </div>
      </li>

      <li>
        <a href="#">First Aid</a>
        <div class="dropdown"> <!-- 统一类名为dropdown -->
          <ul>
            <li><a href="#">Explaining First Aid</a></li>
            <li><a href="#">Purpose of First Aid </a></li>
            <li><a href="#">First Aid Kit</a></li>
          </ul>
        </div>
      </li>

      <li><a href="#">Our Cause</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Logout</a></li>
    </ul>
  </div>
</body>
</html>

说明 #

• 把hover触发源从<a>改为父级<li>，确保鼠标在菜单或下拉框内时，<li>始终处于hover状态，下拉框保持显示。
• 统一下拉框类名dropdown，避免重复编写相同样式，提升代码可维护性。
• 补全了logo缺失的字体大小，优化页面显示效果。

内容的提问来源于stack exchange，提问作者BrentLeon03