修复了Navbar破坏展开菜单的问题

Question

我正在以下网站上提供帮助：www.noyoco.com。 我最近添加了一个脚本，用于在用户滚动时将导航栏固定在顶部。

    <script type="text/javascript">
  $(document).ready(function() {
    var s = $("#main-nav");
    var pos = s.position();     
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});
</script>

但是我不知道为什么展开菜单损坏了。

在顶部时正常工作（关闭脚本），在打开脚本时断开（如果滚动）

有人可以帮忙吗？ 谢谢！

Answer 1

这是因为第二个菜单不在导航容器的绝对位置。 它仅在display: block; 并display: none; 当您使用主菜单切换时。

为了解决这个问题，您可以像这样在父容器上添加相对位置：

.multi-level-nav {
  position: relative;
}

以及子菜单上菜单的绝对位置：

.tier-2 { 
  position: absolute; 
  left: 0; 
  right: 0;
  z-index: 2; /* to be above the slideshow */
}

希望能有所帮助。

编辑

也由于这个选择器，您必须更改它，因为它在fixed改变结构：

.nav-row ul ul {
    display: none;
}