右侧的下拉菜单答案

【问题标题】：Dropdown menu to the right右侧的下拉菜单
【发布时间】：2021-10-09 22:42:51
【问题描述】：

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

.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>

【问题讨论】：

标签： html css

【解决方案1】：

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

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

不过，这是一个问题，因为一旦您离开悬停的锚点，兄弟姐妹就会隐藏。所以我们需要重组来创建一个子关系。像这样的：

.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。理想情况下，外部和内部下拉面板没有单独的样式规则。

【讨论】：