Значок zurb-foundation как выпадающее меню

Question

У меня возникли проблемы с использованием набора иконок основания. Я хотел бы использовать значок в качестве кнопки для выпадающего меню в моем навигаторе.

<div class="contain-to-grid sticky"> 
    <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large"> 
    <ul class="title-area"> 
     <li class="name"> 
     <a href="#"><img src="http://placehold.it/100x45&text=Logo"/></a> 
     </li> 
     <li class="toggle-topbar menu-icon"><a href="#">menu</a></li> 
    </ul> 
    <section class="top-bar-section"> 
     <ul class="right"> 
     <li> 
      <i class="fi-thumbnails has-dropdown"></i> 
      <ul class="dropdown"> 
      <li>All</li> 
      <li>Art</li> 
      <li>Music</li> 
      <li>Lifestyle</li> 
      </ul> 
     </li> 
     <li><i class="fi-list has-dropdown" href="#">menu</i></li> 
     </ul> 
    </section> 
    </nav> 
</div> 

любой совет?

Answer 1

Попробуйте обернуть значок в ярлыке привязки и установить атрибут href на #. Кроме того, class="has-dropdown" следует перенести в элемент родительского списка.

<ul class="right"> 
    <li class="has-dropdown"> 
    <a href="#"><i class="fi-thumbnails"></i></a> 
    <ul class="dropdown"> 
     <li>All</li> 
     <li>Art</li> 
     <li>Music</li> 
     <li>Lifestyle</li> 
    </ul> 
    </li> 
    <li class="has-dropdown"> 
    <a href="#"><i class="fi-list">menu</i></a> 
    <ul class="dropdown"> 
     <li>Menu Item</li> 
    </ul> 
    </li> 
</ul>