html - 右边的下拉菜单

Question

当您将光标移到“目录”按钮上时，子项会下拉。但是，当您将鼠标悬停在“衣服”子项上时，右侧的弹出菜单不会出现，通常会出现问题。为什么？

.dropdown {
  position: absolute;
  /* margin: -60px 0 0 200px; */
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: greenyellow;
  padding: 15px;
  border-radius: 5px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 30px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

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

.dropdown:hover .dropdown-content {
  display: block;
}

.dropright-content {
  position: absolute;
  top: 0;
  left: 0px;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropright-content a {
  background-color: #f1f1f1;
}

.dropright-content a:hover {
  background-color: #ddd;
}

.dropright:hover .dropright-content {
  display: block;
}

<div class="dropdown">
  <div class="dropbtn">≡ Catalog</div>
  <div class="dropdown-content"><a href="#">Clothes</a>
    <div class="dropright-content">
      <a href="#">Men's clothing</a>
      <a href="#">Women's clothing</a>
    </div>
    <a href="#">Electronics</a>
    <a href="#">Books</a>
  </div>
</div>

Answer 1

首先，您的右下拉内容不能有 left: 0。这会将它直接放在第一个菜单级别上。

然后，您的悬停选择器关闭了。它需要类似于 .dropdown-content a:hover+.dropright-content，因为存在兄弟关系。

不过，这是个问题，因为一旦您离开悬停的 anchor ， sibling 就会隐藏起来。所以我们需要重构来创建子关系。像这样:

.dropdown {
  position: absolute;
  /* margin: -60px 0 0 200px; */
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: greenyellow;
  padding: 15px;
  border-radius: 5px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 30px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

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

.dropdown:hover .dropdown-content {
  display: block;
}

.dropright-content {
  position: absolute;
  top: 0;
  left: 100%;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: none;
}

.dropright-content a {
  background-color: #f1f1f1;
}

.dropright-content a:hover {
  background-color: #ddd;
}

.inner-dropdown:hover .dropright-content {
  display: block;
}

<div class="dropdown">
  <div class="dropbtn">≡ Каталог</div>
  <div class="dropdown-content">
    <div class="inner-dropdown">
      <a href="#">Одежда</a>
      <div class="dropright-content">
        <a href="#">Мужская одежда</a>
        <a href="#">Женская одежда</a>
      </div>
    </div>
    <a href="#">Электроника</a>
    <a href="#">Книги</a>
  </div>
</div>

CSS 下拉菜单已经使用和讨论了很长时间。您可能会查看众多优秀示例中的一个，以了解如何简化您的结构和 CSS。理想情况下，您没有针对外部和内部下拉面板的单独样式规则。