Html 如何创建悬停在背景图像上的下拉菜单？

我是html/css新手，我一直在使用这个下拉菜单：

第一个问题：我试图使下拉菜单悬停在背景图像/幻灯片上。出于某种原因，我不能那样做

这就是我想要实现的：所以下拉菜单悬停在背景图像上

第二个问题：如果你能在上面的演示中看到，你只有男装按钮。我试图复制代码，只是更改了按钮名称，这样所有的按钮都可以像图片上的一样显示出来，但代码没有将新按钮与男装按钮对齐。有没有什么方法可以修复，这样我就可以让所有的按钮以相同的悬停效果彼此相邻

导航栏的HTML代码：

<nav class="navigation">

<ul>
<li class="menubar"><a href="#">MEN'S WEAR</a>
  <ul>
    <li class="dropdown"><a href="#">TOPWEAR</a>
      <ul>
        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>            
      </ul>
    </li>

    <li class="dropdown"><a href="#">BOTTOMWEAR</a>
      <ul>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Colour Jeans</a></li>
        <li><a href="#">Pants</a></li>
        <li><a href="#">Shorts</a></li>   
      </ul>
    </li>

    <li class="dropdown"><a href="#">FOOTWEAR</a>
      <ul>
        <li><a href="#">Boots</a></li>
        <li><a href="#">Sandals</a></li>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Snickers</a></li>         
      </ul>
    </li>

    <li class="dropdown"><a href="#">ACCESSORIES</a>
      <ul>
        <li><a href="#">Belts</a></li>
        <li><a href="#">Caps</a></li>
        <li><a href="#">Hats</a></li>
        <li><a href="#">Scarves</a></li>
        <li><a href="#">Gloves</a></li>
        <li><a href="#">Sunglasses</a></li>
        <li><a href="#">Watches</a></li>
        <li><a href="#">Jewelry</a></li>              
      </ul>
    </li>

    <li class="dropdown"><a href="#">SALE</a>
      <ul>
        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>            
      </ul>
    </li>

  </ul>
</li>
</ul>

<ul>
<li class="menubar"><a href="#">MEN'S WEAR</a>
  <ul>
    <li class="dropdown"><a href="#">TOPWEAR</a>
      <ul>
        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>            
      </ul>
    </li>

    <li class="dropdown"><a href="#">BOTTOMWEAR</a>
      <ul>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Colour Jeans</a></li>
        <li><a href="#">Pants</a></li>
        <li><a href="#">Shorts</a></li>   
      </ul>
    </li>

    <li class="dropdown"><a href="#">FOOTWEAR</a>
      <ul>
        <li><a href="#">Boots</a></li>
        <li><a href="#">Sandals</a></li>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Snickers</a></li>         
      </ul>
    </li>

    <li class="dropdown"><a href="#">ACCESSORIES</a>
      <ul>
        <li><a href="#">Belts</a></li>
        <li><a href="#">Caps</a></li>
        <li><a href="#">Hats</a></li>
        <li><a href="#">Scarves</a></li>
        <li><a href="#">Gloves</a></li>
        <li><a href="#">Sunglasses</a></li>
        <li><a href="#">Watches</a></li>
        <li><a href="#">Jewelry</a></li>              
      </ul>
    </li>

    <li class="dropdown"><a href="#">SALE</a>
      <ul>
        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>            
      </ul>
    </li>

  </ul>
</li>
</ul>

</nav>

试试这个

.menubar:hover ul {
  opacity: 0.5;
}

---

在旁注中，始终使用display:none隐藏元素，使用display:block显示元素。可见性可能会产生问题。

这就是我将上面的代码插入主代码时的情况：如果我将鼠标悬停在男装按钮上，下拉菜单是可见的，但即使我不将鼠标悬停在按钮上，如图所示的黑色背景也会出现

.menubar:hover ul {
  opacity: 0.5;
}