html - 将鼠标悬停在链接上时显示菜单子(monad)链接

Question

我的网站是 londontradition.com 我正在尝试获取“关于我们”和“期刊”的菜单链接，以便在鼠标悬停在上方时显示子链接。任何帮助表示赞赏。

这是我需要此效果的菜单部分的代码。

<li id="menu-item-749" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub open"><a href="#"><span>About us</span>
</a><ul style="display: block;">
<li id="menu-item-1006" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/history/"><span>HISTORY</span></a></li>
<li id="menu-item-1007" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/heritage/"><span>HERITAGE</span></a></li></ul><span class="holder"></span></li>

Answer 1

首先，您必须通过display:none 隐藏您的子菜单。之后，您可以使用 CSS 中的 :hover 和子菜单的 display:block 触发父菜单。这应该通过悬停打开子菜单。

这是一个例子:

.menu-children {
  display: none;
}
.menu-item-has-children:hover .menu-children {
  display: block;
}

<li id="menu-item-749" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub open"><a href="#"><span>About us</span>
</a>
  <ul class="menu-children">
    <li id="menu-item-1006" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/history/"><span>HISTORY</span></a>
    </li>
    <li id="menu-item-1007" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/heritage/"><span>HERITAGE</span></a>
    </li>
  </ul><span class="holder"></span>
</li>

请注意给您的子菜单 ul 列出类 menu-children(如此代码片段中的示例)

更新

我注意到您的页面正在使用 JavaScript，它设置了 display 参数。这就是您需要更改 JavaScript 的原因或者您可以尝试以下 CSS:

.menu-children {
  display: none !important;
}
.menu-item-has-children:hover .menu-children {
  display: block !important;
}

查看 CSS 中 display 参数的 !important 标签。