悬停时同时显示的下拉菜单

如何解决悬停时同时显示的下拉菜单

我正在使用 Bigcommerce 模板。 当我悬停时，两个下拉菜单都会出现。

我的目标是将鼠标悬停在一个链接上，只会弹出一个下拉菜单。

<div class="nav-links">
        <div class="nav-container">
          {{#each categories}}
            <a href="{{url}}">{{name}} <i class="fas fa-sort-down    "></i></a>
            <div class="nav-content">
              {{#each children}}
              {{#if categories "==" is_active}}
               <ul class="nav-list">
                  <li><a id="dropdown-links" href="{{url}}">{{name}}</a></li>
                </ul>
              {{/if}}
              {{/each}}
            </div>
          {{/each}}
        </div>
      </div>][2]][2]

我正在使用 Bigcommerce，当我显示类别的子类别（子类别）并使用 css 将其下拉时，子类别或下拉菜单会同时显示。在图片中，您可以看到我将鼠标悬停在 CASES 上，但它显示了 SKINS 的下拉菜单。

这里是CSS：

.nav-list
{
  display: none;
  list-style: none;
  z-index: 99999 !important;
}

.nav-content {
  position: absolute;
  background-color: #f8f8f8;
  right: 10px;
}

.nav-container:hover .nav-list
{
  display: block;
}

解决方法

您将鼠标悬停在 nav-container 上，因此 display: block; 将应用于该容器下的任何 nav-list。在这种情况下，所有 nav-list 都在 nav-container 下，因此它们都会显示。

从您的结构来看，您似乎必须在链接本身上应用 :hover 选择器，并将样式应用到其相邻的同级 nav-content。像这样：

a:hover + .nav-content {
   display: block;
}