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。每当您通过onclick添加活动类时，只要在菜单上单击它，它都将变为“ 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;}

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

1 个答案: