html - 注入(inject) SquareSpace Header 的 NavBar Dropdown 在悬停时消失

Question

我有一个带有简单导航栏的网页。实际网页可见here ，可以看到一个CodePen demo here .在 CodePen 演示中，一切正常。如果我将鼠标悬停在下拉菜单上，菜单会出现在下方。然后我可以无缝地将鼠标向下移动到该下拉菜单上并选择一个选项。相比之下，在实际制作网站上，事情就没那么顺利了。下拉菜单按预期出现，但当我将鼠标向下移动到下拉菜单上时，它就会消失 - 它似乎没有注册 hover 事件。

我试过以下方法:

1. 在 .dropdown 的 css 中将 z-index 设置为 1000 或 10000000
2. 使用添加的限定符 !important; 执行第 1 步
3. 在 Chrome 开发工具中，我尝试为网页的其他部分设置较低的 z-index 值，但没有任何改变

值得注意的是，下拉列表绝对隐藏在东西后面。例如，如果我将鼠标悬停在 Alumni 上，下拉菜单中的选项会被网站标签(白色字体)遮挡。

除了弄乱 z-index 之外，还有其他方法可以强制我的下拉菜单注册悬停事件并按预期工作吗？我很乐意使用 Javascript、HTML、CSS 和任何普通的库，例如 Bootstrap 或 JQuery。谢谢!

编辑:@lalitbhakuni 的回答为我解决了这个问题。也就是说，处理与我自己的情况完全相同的人可能会遇到这个问题，想知道如何在不访问 CSS 的情况下实现 CSS 解决方案对于整个网页。这是我在横幅代码注入(inject)中的做法:

<script>
window.onload = function() { 
    var header = document.getElementById('header');
    header.style.zIndex = 10;
};
</script>

Answer 1

您的 header 与您的 navbar 重叠。结果，y 导航下拉菜单不起作用。要解决此问题，您可以按如下方式定义 header z_index:

.transparent-header #header {
    z-index: 10;
}