移动导航菜单中的 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>元素指定为内联，除了上面的“标准”代码：

W3C 建议将Display:Inline 用于水平导航元素。

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