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

你可以用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在子菜单中触发父菜单。这应该通过悬停打开子菜单。

以下是一个例子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

请注意，让您的孩子菜单ul列出课程menu-children（例如此代码段中的示例）

<强>更新

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

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

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

Answer 4

嗯，好吧没人看过这个页面......

在您的代码中只是一个 selector-thing ，这个选择器被编写为隐藏所有子菜单。

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

所以你必须写一个更高优先级的选择器来显示悬停的子菜单。

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

您可以在此处阅读有关selector-priorty的文章：https://css-tricks.com/specifics-on-css-specificity/

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

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

所以你必须在你的代码中添加一个丑陋的！important，它会在悬停（style="display:none;）时覆盖Javascript函数的内联样式：

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

更好的方法是编辑该功能并添加新的离开功能：

$('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 ...">上，以便有机会点击子菜单; - ）

将鼠标悬停在链接上时会显示菜单子链接

4 个答案: