将鼠标悬停在 link 上时显示子菜单 link

Question

我的站点是 londontradition.com 我正在尝试获取菜单链接 'about us' 和 'journal' 以在鼠标悬停在上方时显示子链接。任何帮助表示赞赏。

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

<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

您可以使用 css 来做到这一点。

尝试这样的事情：

.parent:hover {
  .child {
    display: block;
  }
}

Answer 2

有几种方法可以做到这一点，css 和 javascript。我发现最简单的方法是 CSS.

.subMenu {display:none;}
.menuItem:hover .subMenu{ display:block;}

Answer 3

首先你必须通过 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 列出 class menu-children（作为此代码段中的示例）

更新

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

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

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

Answer 4

嗯，好的，没有人看过该页面...

这只是一个 选择器东西 在你的代码中，这个选择器是用来隐藏所有子菜单的。

#mobile-menu ul ul {
    display: none;
    ...
}

所以你必须写一个这样的选择器，具有更高的优先级才能在悬停时显示子菜单。

#mobile-menu ul li:hover > ul {
    display: block;
}

您可以在此处阅读有关选择器优先级的文章：https://css-tricks.com/specifics-on-css-specificity/

但是现在你遇到了另一个问题，你有一个显示和隐藏子菜单的 Javascript 函数，它与 :hover:

冲突

$('body').on('click', '.holder', function() {
   ... do hide and show things ...
});

所以你必须在你的代码中添加一个丑陋的 !important 来覆盖悬停时 Javascript 函数的内联样式 (style="display:none;):

#mobile-menu ul li:hover > ul {
    display: block !important;
}

更好的方法是编辑函数并添加一个新的 leave 函数：

$('body').on('click mouseenter', '.holder', function() {
   ... do show (and hide on click) thing ...
});

和

$('body').on('mouseleave', '.has-sub', function() {
   ... do hide thing ...
});

第二个功能在完整的 <li class="... has-sub ..."> 子菜单上，以便有机会点击子菜单 ;-)

将鼠标悬停在 link 上时显示子菜单 link

Make menu sublinks appear when hovering over the link

html

css

menu

hover