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>