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

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。 每当您在菜单上单击添加活动类时，它将使其变为“ display：block”

// .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;}