Question

我在内页上有一个子菜单，比如这个页面：

http://www.accessnewdawn.com/meet-jo-ann

当您将鼠标悬停在＆＃34;实践领域＆＃34;时，子菜单不会显示，直到您向下滚动到英雄单位。

原始主题开发人员提到编写一个JS脚本，将以下值更改为＆＃34; 0％＆＃34;滚过英雄之后：

.home .ha-header {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}

我认为她对我所引用的内容感到困惑，因为我的问题与主页无关。所以，我拿了她的代码并尝试将它应用到悬停的子菜单，因为它只显示在该状态。

似乎我应该能够通过CSS解决这个问题，但我明显遗漏了一些东西，因为我正在做的不是让子菜单显示在英雄单位上：

.ha-header ul.sub-menu:hover {
  -webkit-transform: translateY(0%) !important;
  -moz-transform: translateY(0%) !important;
  transform: translateY(0%) !important;
}

我觉得我正在咆哮错误的树。有人会介意看看我出错的地方吗？

谢谢！

Answer 1

我能够近距离观察并发现我的解决方案。我最初尝试的解决方案之一涉及设置子菜单的z-index值。但是，它不适合我，所以我认为开发人员发送给我的是造成问题的原因（因此上面的问题。）在没有找到解决方案之后，我重新审视了z-index。

我忘了使用z-index进行导航的一个规则是确保父元素没有设置为隐藏的溢出。就我而言，它不是直接的父元素，而是导致可见性问题的另一个元素。

所以我能够将以下内容添加到我的CSS中：

.ha-header-hide {
    overflow: initial;
}

更正问题并允许子菜单悬停在英雄单位上显示。

希望这个提醒有助于其他人。

子菜单在英雄单位上消失

1 个答案: