悬停在 CSS 下拉菜单上无法正常工作

Question

我刚刚构建了我的导航栏，但下拉菜单有一个小问题。下拉菜单出现在悬停时，但是当我尝试将鼠标从导航栏上的顶部链接移动到下方的下拉菜单时，下拉菜单消失了，因此我无法实际点击任何链接。

我该如何解决这个问题？

CSS

/* Navbar */
h1 {
    color: white;
    font-family: 'Great Vibes', cursive;
    margin-left: 30px;
    font-size: 45px;
   text-align: left;
    margin-top: -57px;
  }

  .navbar {
  background: rgba(179, 173, 140);
  font-family: 'Hind', sans-serif;
  height: 4.5rem;
  width: 1280px;
  margin-top: -8px;
  margin-left: -8px;
} 

/* Links inside the navbar */
.navbar a {
  float: right;
  font-size: 18px;
  color: white;
  line-height: 44px;
  padding: 14px 16px;
  text-decoration: none;
} 

/* The dropdown container */
.dropdown {
  float: right;
  overflow: hidden;
}

.retreat-dropdown {
    color: white;
    font-size: 18px;
    position: relative;
    margin-top: 26px;
}

.navbar a:hover, .dropdown:hover  {
    text-decoration: underline white;
  }
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: 'Hind', sans-serif;
  }
  .dropdown-content a:hover {
    background-color: rgb(197, 192, 166);
  }

  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background: rgb(160, 189, 127);
    font-family: 'Hind', sans-serif;
    z-index: 1;
    margin-top: 20px;
  }
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
    margin-left: -30px;
  }
    #page-container {
      position: relative;
      min-height: 100vh;
    }

Answer 1

使用纯 CSS 保持菜单打开是一个经典问题。使用 javascript 更容易解决（它还允许您添加延迟，因此当您不小心将鼠标悬停一秒钟时它不会立即关闭，这是一个巨大的可用性改进）。但是如果你想用纯 CSS 来做，那么你应该打开开发工具并在你的 .dropdown 元素上启用 :hover 修饰符。这应该更清楚问题是什么。我怀疑这与overflow:hidden有关：

.dropdown {
  float: right;
  overflow: hidden;
}

由于.dropdown-contents 是position: absolute，父级将不知道内容有多大，它们将被视为溢出。打开开发工具后，这可能会变得很明显。