Zurb基金会菜单中断

Question

我创建了一个使用zurb基金会的网站。我的问题是这样的。当我将浏览器大小和导航菜单从类别更改为单词“菜单”时，我可以单击它并选择我想要导航到的类别。然而，当我选择一个具有四个或更多选项的类别时，第四个和其他所有下面的选项似乎都会被切断。我试图改变某些元素的z-索引来弥补这个和其他一些事情，但是我没有解决这个问题的运气。我在这里看到类似的问题，但没有找到同样的问题。任何人都可以协助吗？

Answer 1

我遇到同样的问题。出于某种原因，当导航收缩时单击一个子菜单时，会将其切断。

我都试过了，z-index的，填充，甚至每一个里的背景颜色，但我相信，高度从JS编译。

临时解决方案是在菜单中添加另一个Div。

<li><a href="#">&nbsp;</a></li> 

这个get中断了，但没关系，因为这里没有任何信息。希望这有助于创建更好的解决方案！

Answer 2

我遇到过类似的问题。真奇怪。我尝试了添加Dan建议的额外项目的工作，但空间（虽然截止）对我来说太大了。在我的情况下，这是一个带有链接的<ul>列表。似乎什么工作对我来说是设置下边距的最后一个元素上像这样：或者

<ul class='dropdown'> 
    <li><a href='#link'>Item 1</a></li> 
    <li><a href='#link'>Item 2</a></li> 
    ... 
    <li><a href='#link' style='margin-bottom:1em;'>Item n</a></li> 
</ul> 

，保持标记清洁，并保持造型出来，你可以有CSS：

.problem-dropdown li:last-child 
{ 
    margin-bottom: 1em; 
} 

然后将类problem-dropdown添加到提供问题的下拉列表中。

如果您有时间，则问题由设置nav.top-bar.expanded元素的高度的代码引起。如上所述设置margin-bottom可以使其为菜单设置正确的高度。在我的情况下手动增加它解决了我的问题，所以我想你可以为事件编写一个JS侦听器，然后修复它。但是，人们可能会考虑仅仅修复首先执行它的代码。