基礎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; 
}