基础3 - 下拉菜单将页面压下，如何防止？

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

只需添加：

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

或初始化：

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

要停止所有可怕的跳跃

Answer 3

对于基金5我刚刚创造了这个黑客为自己想通ID共享。

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