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. Добавить ul с классом menu по названию, чтобы решить эту проблему:

<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