注入 SquareSpace Header 的 NavBar Dropdown 在悬停时消失
NavBar Dropdown injected into SquareSpace Header Disappearing on Hover
我有一个带有简单导航栏的网页。实际网页可见here, and a CodePen demo can be seen here。在 CodePen 演示中，一切正常。如果我将鼠标悬停在下拉菜单上，菜单会出现在下方。然后我可以无缝地将鼠标向下移动到该下拉菜单和 select 一个选项上。相比之下，在实际制作网站上，事情就没那么顺利了。下拉菜单按预期出现，但是当我将鼠标向下移动到下拉菜单上时，它就会消失 - 它似乎没有注册 hover 事件。
我试过以下方法：
- 在
.dropdown 的 css 中将 z-index 设置为 1000 或 10000000
- 使用添加的限定符
!important; 执行步骤 1
- 在 Chrome 开发工具中，我尝试给网页的其他部分设置较低的
z-index 值，但没有任何改变
值得注意的是，下拉列表绝对隐藏在东西后面。例如，如果我将鼠标悬停在 Alumni 上，下拉菜单中的选项会被网站标签（白色字体）遮挡。
除了弄乱 z-index 之外，还有其他方法可以强制我的下拉菜单注册悬停事件并按预期工作吗？我很乐意使用 Javascript、HTML、CSS 和任何普通库，例如 Bootstrap 或 JQuery。谢谢！
编辑：@lalitbhakuni 的回答为我解决了这个问题。也就是说，有可能正在处理与我自己的情况完全相同的人会 运行 并想知道如何在不访问 CSS 的情况下实施 CSS 解决方案整个网页。这是我在横幅代码注入中的做法：
<script>
window.onload = function() {
var header = document.getElementById('header');
header.style.zIndex = 10;
};
</script>
您的 header 与您的 navbar 重叠。结果，y 导航下拉菜单不起作用。要解决此问题，可以，您可以按如下方式定义 header z_index：
.transparent-header #header {
z-index: 10;
}
我有一个带有简单导航栏的网页。实际网页可见here, and a CodePen demo can be seen here。在 CodePen 演示中，一切正常。如果我将鼠标悬停在下拉菜单上，菜单会出现在下方。然后我可以无缝地将鼠标向下移动到该下拉菜单和 select 一个选项上。相比之下，在实际制作网站上，事情就没那么顺利了。下拉菜单按预期出现，但是当我将鼠标向下移动到下拉菜单上时，它就会消失 - 它似乎没有注册 hover 事件。
我试过以下方法：
- 在
.dropdown 的 - 使用添加的限定符
!important; 执行步骤 1
- 在 Chrome 开发工具中，我尝试给网页的其他部分设置较低的
z-index值，但没有任何改变
css 中将 z-index 设置为 1000 或 10000000
值得注意的是，下拉列表绝对隐藏在东西后面。例如，如果我将鼠标悬停在 Alumni 上，下拉菜单中的选项会被网站标签（白色字体）遮挡。
除了弄乱 z-index 之外，还有其他方法可以强制我的下拉菜单注册悬停事件并按预期工作吗？我很乐意使用 Javascript、HTML、CSS 和任何普通库，例如 Bootstrap 或 JQuery。谢谢！
编辑：@lalitbhakuni 的回答为我解决了这个问题。也就是说，有可能正在处理与我自己的情况完全相同的人会 运行 并想知道如何在不访问 CSS 的情况下实施 CSS 解决方案整个网页。这是我在横幅代码注入中的做法：
<script>
window.onload = function() {
var header = document.getElementById('header');
header.style.zIndex = 10;
};
</script>
您的 header 与您的 navbar 重叠。结果，y 导航下拉菜单不起作用。要解决此问题，可以，您可以按如下方式定义 header z_index：
.transparent-header #header {
z-index: 10;
}