Html 子菜单消失在英雄单位上方

我在内部页面上使用了一个子菜单，如以下页面：

当你将鼠标悬停在“练习区域”上时，直到你向下滚动超过英雄单位时，子菜单才会出现

最初的主题开发人员提到编写一个JS脚本，在滚动过英雄后将以下值更改为“0%”：

.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;
}

我觉得我找错人了。有人介意看看我哪里出了问题吗

---

谢谢

我能够更仔细地观察这一点，并找到了解决方案。我最初尝试的解决方案之一是设置子菜单的z索引值。但是，它对我不起作用，所以我认为开发人员发给我的是导致问题的原因（因此出现了上述问题）。在没有找到解决方案之后，我重新修改了z-index

我忘记了使用z-index进行导航的规则之一是确保父元素没有将溢出设置为hidden。在我的例子中，它不是直接的父元素，而是导致可见性问题的链上的一个元素

因此，我能够在CSS中添加以下内容：

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

要更正此问题并允许子菜单显示在上，请将鼠标悬停在英雄单元上方

希望这个提醒能帮助其他人