Currently utilizing the Bigcommerce stencil theme, I have encountered an issue where both dropdown menus appear when I hover over a link.
My goal is to have only one dropdown menu pop up when hovering over a specific link.
https://i.sstatic.net/paVoY.png
<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]
While using the Bigcommerce platform, I am facing an issue with displaying subcategories (children) as dropdown menus. Even after assigning CSS styles, both subcategories show up simultaneously when hovered over. The screenshot demonstrates this problem as I hover over "CASES", but it displays the dropdown menu for "SKINS".
Below is the snippet of CSS code:
.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;
}