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

你的＆＃34; #nav ul.sub-menu＆＃34;规则是从＆＃34; nav ul，nav：active ul＆＃34;继承37.5rem的高度。规则，大于子菜单所需的高度。添加＆＃34;身高：自动＆＃34;到＆＃34; #nav ul.sub-menu＆＃34;班级摆脱了我的差距。

Answer 2

构建水平导航栏的一种方法是将<li>元素指定为内联，除了＆＃34;标准＆＃34;上面的代码：

W3C推荐使用Display:Inline获取水平导航元素。

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

移动导航菜单中的CSS差距（仅在移动设备上可观看）

2 个答案: