Drop down menu showing up at same time on hover

Question

Im using Bigcommerce stencil. Both dropdown menus show up when I hover.

My target is to hover on one link only one dropdown menu will pop up.

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

I'm using Bigcommerce and when I display the subcategories (children) of categories and use css to make it dropdown, both subcategories or dropdown menus show up at the same time. In the picture you can see I'm hovering my mouse at CASES but it shows the dropdown menu of SKINS.

Here is the 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;
}

Answer 1

You are hovering over nav-container, so display: block; will apply to any nav-list under that container. In this case, all nav-lists are under nav-container, so they will all display.

From your structure, it looks like you have to apply the :hover selector on the link itself, and apply the styles to its adjacent sibling nav-content. Like so:

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