Zurb Foundation下拉按钮菜单掉落太多

Zurb Foundation Dropdown Button menu drops way too much

本文关键字：太多 菜单 按钮 Foundation Zurb      更新时间：2023-09-26

我想添加一个下拉按钮从基础(像这些:http://foundation.zurb.com/docs/components/dropdown-buttons.html)到我的网站，使用"data-dropdown"属性将其链接到一个列表，如底部文档页面所述。下拉菜单可以工作-但是，不知何故，当我点击按钮时，列表下降了太多(比如按钮下方300px)。

我甚至试图将按钮隔离在空白页面上，或者没有我所有的自定义设置和样式，没有运气。我安装了最新的Foundation 4.0.5作为gem。有人对这个版本的Foundation有同样的问题吗?或者在文档示例中有语法错误?我复制粘贴了下面的代码片段:

<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中的新下拉类不能很好地在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'定义在'large-6 columns'div中，当点击相应的按钮时，它将显示在按钮的下方，正如您所描述的那样。相反，'drop2'是在div.columns之外定义的，它将正确显示。

从我的实验，下拉菜单可以定义一行内没有问题。

相关文章：