Question

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

我尝试过以下方法：

在z-index css

.dropdown

使用添加的!important;
在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>

Answer 1

您的header与navbar重叠。 y导航下拉列表无法正常工作。要解决此问题，您可以按以下方式定义header z_index：

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

注入SquareSpace标题的NavBar Dropdown在悬停时消失

1 个答案: