javascript - 悬停时同时显示下拉菜单

Question

我使用 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;
}

标签： javascriptcssbigcommercestencil-compiler

Answer 1

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

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

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