Javascript ZURB基金会下拉按钮菜单掉落方式太多

我想从基础添加一个下拉按钮（像这样：）到我的站点，使用“数据下拉”属性将它链接到一个列表，如底部的DOC页面中所描述的。 下拉菜单可以工作-但是，当我点击按钮时（比如按钮下方的300px），列表会以某种方式下拉太多

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

<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>

谢谢你的帮助

• 彼得

---

几天前，我遇到了同样的问题。在我看来，基础4中的新下拉类不能很好地在DIVE列元素中发挥作用。考虑以下事项：

<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”是在“large-6 columns”div中定义的，当单击相应的按钮时，它将显示在按钮的下方，正如您所描述的。相反，“drop2”是在div.columns之外定义的，它将正确显示

---

根据我的实验，下拉列表可以在一行内定义，没有问题。似乎是这些专栏引起了这个问题。
几天前我也遇到过同样的问题。在我看来，基础4中的新下拉类不能很好地在DIVE列元素中发挥作用。考虑以下事项：

<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”是在“large-6 columns”div中定义的，当单击相应的按钮时，它将显示在按钮的下方，正如您所描述的。相反，“drop2”是在div.columns之外定义的，它将正确显示

---

根据我的实验，下拉列表可以在一行内定义，没有问题。似乎是这些专栏引起了问题。
效果很好，非常感谢！我应该考虑我自己，因为我想知道为什么在基础文件，他们也有列以下的名单，也。希望他们能解决这个问题，或者至少在文档中添加一个提示，不要让新手感到困惑。这很有效，谢谢！我应该考虑我自己，因为我想知道为什么在基础文件，他们也有列以下的名单，也。希望他们能解决这个问题，或者至少在文档中添加一个提示，以免让新手感到困惑。