Question

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

相关网站为here。这个网站还有其他一些问题，但是这个问题让我感到很沮丧。

修复它的最佳方法是什么，因此下拉菜单不会压低剩下的内容？

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

对于5号基金会，我刚刚为自己创建了这个黑客，想通过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});

阻止所有可怕的跳跃

基础3 - 下拉菜单向下推页面，如何防止这种情况？

3 个答案: