悬停时显示所有子链接的导航

Question

我试图弄清楚当您将鼠标悬停在具有子菜单的菜单链接上时如何打开所有子菜单。它们会像大型菜单一样打开，并在各自的菜单链接下对齐。

现在我可以让它们最初在悬停时全部打开，但随着您的移动它们会消失。我在这里添加了一个 codepen 链接：https://codepen.io/sibarad/pen/LrvooV

<nav id="site-navigation" class="main-navigation">
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>
      <div class="menu-main-menu-container">
        <ul id="primary-menu" class="menu nav-menu" aria-expanded="false">
          <li class="menu-item menu-item-has-children"><a>Browse Artworks</a>
            <ul class="sub-menu">
              <li class="menu-item"><a>New Work</a></li>
              <li class="menu-item"><a>All Collections</a></li>
              <li class="menu-item"><a>Prints</a></li>
              <li class="menu-item"><a>Arquive</a></li>
            </ul>
          </li>
          <li class="menu-item menu-item-has-children"><a>Our Events & Shows</a>
            <ul class="sub-menu">
              <li class="menu-item"><a>Upcoming Events</a></li>
              <li class="menu-item"><a>Online Show</a></li>
              <li class="menu-item"><a>Past Events</a></li>
            </ul>
          </li>
          <li class="menu-item menu-item-has-children"><a>Visit Our Galleries</a>
            <ul class="sub-menu">
              <li class="menu-item"><a>Gallery 1</a></li>
              <li class="menu-item"><a>Gallery 2</a></li>
              <li class="menu-item"><a>Gallery 3</a></li>
            </ul>
          </li>
          <li class="menu-item"><a>About the Artist</a></li>
          <li class="menu-item"><a>Contact Us</a></li>
        </ul>
    </div>
</nav>

桌面的相关CSS：

 .main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
 }

.menu-item-has-children:hover .sub-menu,
.menu-item-has-children:hover ~ .menu-item-has-children .sub-menu {
    display: block;
}

此外，由于它们应该放在带有边框的漂亮托盘中，我想知道是否有一种方法可以将它们单独设置为一个整体。

提前感谢您的帮助。

Answer 1

问题在于你的 CSS。每次您将鼠标悬停在菜单上时，它都会将其设为display:block，因此我对其进行评论并在其下添加一个 CSS。每当您单击菜单时，它都会使其成为“显示：阻止”，因为您正在使用它添加活动类。

// .menu-item-has-children:hover .sub-menu,
// .menu-item-has-children:hover ~ .menu-item-has-children .sub-menu {
//   display: block;
// }

 .sub-menu.active{display: block;}