手機導航菜單中的CSS空白（僅在移動設備上可見）

Question

我正在開發響應式導航並試圖獲得響應式設計。

現在，如果你看的網站與移動設備和你點擊左下角的菜單按鈕，菜單下拉，這是工作的罰款。我的問題是，在子菜單的最後一部分和下一個主菜單項之間存在差距......對於上帝的愛，我無法找到解決方案來彌補這個缺口。 :(

您可以登錄網站您的移動設備在這裏：http://bit.ly/1Hwbn94

CSS代碼：

#menue {visibility: visible; z-index: 99999;} 
nav ul, nav:active ul {margin: 0; display: none; position: absolute; padding: 0; width: 0; height: 37.5rem; z-index:99998; padding: 0;} 
#nav ul, div.menu ul {list-style: none; margin: 6.25rem 0 0 0; padding: 0;} 
#nav ul ul {display: block; position: relative; margin: 0; padding: 0; z-index: 99998;} 
#nav ul ul a {display: block; padding: 0 50px 0 0; margin: 0; background: rgba(200, 200, 200, .97); color: black; text-decoration: none; text-align: right; font-size: 3.125rem; line-height: 7.5rem;} 
nav li {text-align: right; padding: 0; margin: 0; width: 800px;} 
nav:hover ul {display: block; padding: 0; margin: 0;} 
#nav a {color: black; display: block; padding: 0 3rem 0 0; text-decoration: none; background: rgba(200, 200, 200, .97); margin: 0; font-size: 3.125rem; line-height: 9rem;} 
#nav ul li.current_page_item > a, #nav ul li.current-menu-ancestor > a, #nav ul li.current-menu-item > a, #nav ul li.current-menu-parent > a {background: rgba(255, 255, 255, .99);} 
#nav ul.sub-menu {width: 600px; margin: 0; padding: 0;} 
#nav ul.sub-menu li {float: none; display: block; margin: 0; padding: 0;} 

我不知道，我怎麼沒拿到差距，但也許不同的人可以看到問題/問題提前致謝

Answer 1

您的「#nav ul.sub-menu」規則從「nav ul，nav：active ul」規則繼承37.5rem的高度，該規則大於子菜單所需的高度。在「#nav ul.sub-menu」類中添加「height：auto」爲我消除了空隙。

Answer 2

構建水平導航欄的一種方法是將<li>元素指定爲內聯，除了「標準」代碼a bove：

W3C對水平導航元素使用Display:Inline的建議。

和Display:Block對於垂直導航，您似乎正在使用display:inline-block，請嘗試更改。