悬停时同时显示下拉菜单答案

【问题标题】：Drop down menu showing up at same time on hover悬停时同时显示下拉菜单
【发布时间】：2021-09-08 14:21:39
【问题描述】：

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

【问题讨论】：

能否详细描述一下您的问题？
@nipulse 你能创建 jsfiddle 并解释一下吗
问题已更新。谢谢

标签： javascript css bigcommerce stencil-compiler

【解决方案1】：

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

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

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

【讨论】：