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

Question

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

现在我可以让它们在悬停时完全打开，但随着你的移动，它们会消失。我在这里添加了一个代码笔链接：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;}