Zurb基金会菜单被切断

Question

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

Answer 1

我也遇到过类似的问题。真奇怪。我尝试了添加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监听器，然后修复它之后的事情。但是，人们可能会考虑只修复首先执行此操作的代码。

Answer 2

我遇到了同样的问题。由于某些原因，当我缩小导航时单击子菜单时，它会将其切断。

我试过，z-index，padding，甚至每个li的背景颜色，但我相信高度是从JS编译的。

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

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

这个得到了切断，但没关系，因为那里没有信息。希望这有助于创建更好的解决方案！