Zurb基金会下拉按钮菜单太多下降

Question

我想从我的网站添加一个从基金会的下拉按钮（如这些：http://foundation.zurb.com/docs/components/dropdown-buttons.html），使用“数据下拉”属性链接到列表，如doc底部。 下拉菜单工作 - 但是，不知何故，当我点击按钮时（如按钮下方300px），列表太多下降了。

我甚至试图隔离空白页上的按钮或没有我所有的自定义设置和样式，没有运气。我将最新的Foundation 4.0.5作为宝石安装。 有没有人对这个版本的基金会有同样的问题？或者在doc-example中有语法错误？ 我复制粘贴+正是这个代码片段：

<a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button</a><br> 

<ul id="drop1" class="f-dropdown"> 
    <li><a href="#">This is a link</a></li> 
    <li><a href="#">This is another</a></li> 
    <li><a href="#">Yet another</a></li> 
</ul> 

感谢您的帮助！

• 彼得

Answer 1

我遇到了同样的问题几天就回来。在我看来，Foundation 4中的新下拉类在div.columns元素内部不会很好地播放。考虑以下几点：

<div class="row"> 
    <div class="large-6 columns"> 
    <ul class="inline-list"> 
     <li> 
     <a href="#" class="button dropdown" data-dropdown="drop1">No Good</a> 
     <ul id="drop1" class="f-dropdown"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
     </ul> 
     </li> 
     <li><a href="#" class="button dropdown" data-dropdown="drop2">Much Better</a></li> 
    </ul> 
    </div> 
</div> 
<ul id="drop2" class="f-dropdown"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a></li> 
</ul> 

在这个例子中，“drop1”就是“大6列” DIV中定义，并点击相应的按钮时，会显示远低于按钮，就像你描述。相反，'drop2'是在div.columns之外定义的，它会正确显示。

从我的实验中，下拉列表可以在一行内部定义而没有问题。这是似乎导致问题的列。