移动导航菜单中的 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的高度，该高度大于子菜单所需的高度。 将"height：auto"添加到"#nav ul.sub-menu"类中，为我消除了差距。

Answer 2

构建水平导航栏的一种方法是将<li>元素指定为内联，以及上面的"标准"代码：

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

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