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进行操作，则应打开开发工具并在:hover元素上启用.dropdown修饰符。这应该使问题更加明显。我怀疑这涉及到overflow:hidden：

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

由于.dropdown-contents为position: absolute，因此父级不知道内容有多大，它们将被视为溢出。一旦您打开开发工具，这将很明显。

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

1 个答案: