Foundation 5 Top bar不适用于Android浏览器

Question

http://foundation.zurb.com/docs/components/topbar.html示例页面适用于各种浏览器，在“小”分辨率范围内，除了一个：Android的股票（默认）浏览器。

使用Chrome，Firefox，Safari（甚至IE）时，您可以深入了解我们的所有5个级别。

Android浏览器适用于下拉菜单的前2个级别，但根本不显示第三级！

起初我以为这是我的菜单，但官方的文档/演示页面也打破了！

我认为这是一个错误，但无法在错误跟踪器中找到它。

NB ::每个版本（2到4.3）和设备都有相同的行为。

Answer 1

对我而言，这可以解决Android浏览器库存问题

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .top-bar.expanded .top-bar-section .has-dropdown.moved > .dropdown { clip:initial;}
    .top-bar.expanded .top-bar-section .dropdown {clip:initial;}
}

未在iOS设备上测试过，也许有人可以在iOS浏览器上测试它。

Answer 2

我能够让我的示例顶栏http://cdpn.io/cBjun在运行Android 4.3的手机上工作五级。创建示例后，我建议您仔细检查以下内容：

• 您的元视口设置正确，例如：
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" />
• 您的有效HTML包含ul，li和a的正确嵌套;您可以使用W3C Markup Validation Service进行检查。请记住，一旦打开ul和li，在完成菜单项之前不要再次关闭它们。如果你看一下我的例子，那么最后十三行只是关闭标签。
• 您希望获得下拉列表的菜单项上包含<li class="has-dropdown">的正确CSS类，并<ul class="dropdown">嵌套在li之后a创建下拉列表

如果您有任何问题，请告诉我们，该网站或顶级条码的链接将有助于社区，帮助您，诊断问题。

我希望有所帮助。

编辑03/27/2014

我在手机上检查了我的codepen并拍了下面的屏幕截图：

另请注意，我的示例是在5.2.1版本中创建的。