Foundation6 响应式导航

Question

非常欢迎对我的导航栏提供一些帮助。我正在努力实现我认为最明显的设置。大屏幕上的下拉菜单和小屏幕上的向下钻取。我有一支笔here，但有不应该存在的项目符号，并且菜单在较大的屏幕上水平打开（我想要垂直）。

<div class="title-bar" data-responsive-toggle="nav-menu" data-hidefor="medium">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title player-controls">Brand
    </div>
</div>

<div class="top-bar" id="nav-menu">
    <div class="row">
        <div class="top-bar-left show-for-medium">
            Brand
        </div>

        <div class="top-bar-right">
            <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
                <li class="has-submenu">
                    <a href="#">Item</a>
                    <ul class="vertical submenu" data-submenu>
                        <li role="menuitem"><a href="#">Sub-Item</a></li>
                        <li role="menuitem"><a href="#">Sub-Item</a></li>
                        <li role="menuitem"><a href="#">Sub-Item</a></li>
                        <li role="menuitem"><a href="#">Sub-Item</a></li>
                    </ul>
                </li>
                <li class=""><a href="#">Item</a></li>
                <li class=""><a href="#">Item</a></li>
                <li class=""><a href="#">Item</a></li>
                <li class=""><a href="#">Item</a></li>

            </ul>
        </div>
    </div>
</div>

Answer 1

不完全确定垂直菜单问题，因为笔对我来说很好用。关于错误的要点，您缺少一些基本课程。对于站点标题，您使用的是 li，而周围没有 ul 元素。在标题周围添加一个带有 menu 类的 ul 以解决该问题：

<ul class="menu">
  <li class="menu-text">Site Title</li>
</ul>

子菜单缺少相同的menu 类：

<ul class="vertical submenu menu" data-submenu>
  <li role="menuitem"><a href="#">Sub-Item</a></li>
  <li role="menuitem"><a href="#">Sub-Item</a></li>                        
  <li role="menuitem"><a href="#">Sub-Item</a></li>
  <li role="menuitem"><a href="#">Sub-Item</a></li>
</ul>

这是更新后的Pen