我在使用基础图标集时遇到问题。我想在我的导航栏中使用一个图标作为下拉菜单的按钮。
<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>
有什么建议吗?
最佳答案
尝试将图标包裹在 anchor 标记中并将 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>
关于css - zurb-foundation 图标作为下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31174767/