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 within dropdown并尝试了答案，没有任何成功：S

Answer 1

.f-dropdown.content will do nothing since you dont have a class named content under f-dropdown class

这些应该在你的CSS中：

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

Working Example

Answer 2

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

Answer 3

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

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

基金会 - 下拉列表中的下拉菜单

3 个答案: