基础 - 下拉菜单中的下拉菜单

Question

使用 Foundation 5，我尝试在下拉列表中添加一个下拉列表...

<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
    <li><a href="#">Modify</a></li>
    <li class="has-dropdown" ><a href="#">Share</a>
        <ul class="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>
    </li> 
</ul>

但是没有任何成功！

Share

菜单始终显示在

Modify

菜单下。

编辑1

我尝试了其他方法，它更好但还不够好：

<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
    <li><a href="#">Modify</a></li>
      <li ><a data-dropdown="drop2"  href="#"  >Share</a>
          <ul id="drop2" class="f-dropdown content " data-dropdown-content  >
              <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>
     </li>
</ul>

并添加到我的 .css 中：

    .f-dropdown.content {display: block;}

这是我的完整 css：http://pastebin.com/QPaFbenF 上一行位于第 67 行

但是，当单击

Share

时，

More

菜单消失，我必须将鼠标放在

More

链接上才能显示

More

菜单及其子菜单

Share

。

我在 zurb 论坛上找到了这个问题：dropdown inside dropdown并尝试了答案，但没有成功：S

Answer 1

.f-dropdown.content

不会执行任何操作，因为您在

f-dropdown class

下没有名为 content 的类

这些应该在你的 CSS 中：

.has-dropdown ul {
  display: none;
}
.has-dropdown:hover ul {
  display: block;
}

工作示例

Answer 2

从头开始时，嵌套下拉菜单往往会变得复杂。我总是建议从superfish开始。您可以在此处查看工作演示：http://users.tpg.com.au/j_birch/plugins/superfish/examples/

Answer 3

我遇到了同样的问题，我意识到我只是没有包含 jQuery 触发器来通过 dropdown.js 文件工作来获取所有下拉列表等元素。

<script>
    $(document).foundation();
</script>