css - Foundation 3 - 下拉菜单下推页面，如何防止这种情况？

Question

我正在使用 Foundation 3 构建一个响应式站点，并且我有一个下拉菜单，当屏幕尺寸较小时，它会向下推内容而不是覆盖下面的内容。我不确定为什么会发生这种情况，或者我可能做了什么导致这种情况。

有问题的网站在这里。该网站还有其他一些问题，但这是让我非常困惑的问题。

修复它的最佳方法是什么，以便下拉菜单不会压低其余内容？

Answer 1

不确定您是否正在寻找特定于您的框架的解决方案，但这里是我为满足您的要求所做的更改。

.nav-bar.right {
  position:absolute;
  z-index:100;
  background-color:#fff;
  top:5px;
  border:2px solid #ccc;
  border-top-width:0px;
}

.top-bar.expanded {
  overflow:visible;
}

似乎工作得很好（我只在 Chrome 26 中测试过）。随意调整，你需要！

Answer 2

对于 Foundation 5，我刚刚为自己创建了这个 hack，我想 id 分享一下。

.top-bar.expanded {
    overflow:visible;
}
.top-bar-section ul {
    position: absolute;
    right: 0;
}

Answer 3

只需添加：

<nav class="top-bar" data-options="scrolltop: false">

或初始化：

$(document).foundation('topbar', {scrolltop: false});

阻止所有可怕的跳跃