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

【问题标题】：Foundation - Dropdown within dropdown基础 - 下拉菜单中的下拉菜单
【发布时间】：2014-05-27 16:32:30
【问题描述】：

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

【问题讨论】：

所以你想在修改菜单旁边显示共享菜单？
@JanakaRRajapaksha 我不太清楚你所说的“下一个”是什么意思，但我只想要以下架构：更多->修改-共享->（这是一个链接-这是另一个-又一个） . More 是一个下拉菜单，Share 是More 下拉菜单中的另一个下拉菜单....
我猜Modify和Share是横放还是竖放？
@JanakaRRajapaksha 垂直是的！

标签： html css drop-down-menu zurb-foundation

【解决方案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

【讨论】：

我尝试了您的答案，但没有任何成功...我尝试了其他想法但没有更多成功 --> 查看我的编辑 1
我用工作示例更新了答案。如果你能提供你的css代码，我可以帮忙
我在您的 css 中看不到任何与我给定 css 代码冲突的内容。你检查更新的答案了吗？
我刚刚做了你在工作示例中写的内容，非常完美！非常感谢！

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：