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

我不知道，我是怎么得到那个差距的，但也许其他人可以看到 problem/issue。非常感谢。

Answer 1

One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code above:

W3C 建议对水平导航元素使用 Display:Inline。

和 Display:Block 用于垂直导航，您似乎正在使用 display:inline-block，请尝试更改它。

Answer 2

您的“#nav ul.sub-menu”规则从 "nav ul, nav:active ul" 规则继承了 37.5rem 的高度，该高度大于子菜单所需的高度。添加 "height:auto" 到“#nav ul.sub-menu” class 为我消除了差距。

CSS 移动导航菜单中的空白（只能在移动设备上观看）

CSS gap in mobile navigation menu (only watchable on mobile device)

css

navigation

mobile