css - zurb-foundation icon as a dropdown menu -


i'm having trouble using foundation icon set. i'd use icon button dropdown menu in navbar.

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

any advice?

try wrapping icon in anchor tag , setting href attribute #. also, class="has-dropdown" should moved parent list item.

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

Comments

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -