html - 如何在 zurb foundation 的侧导航中定位用作图标的 ":before"元素？

Question

我在基金会的侧边导航中添加了一个子菜单，就像在 this 中一样。例如，但图标位于文本上方。

我的 CSS:

.hasChildren:before{
    content: "\25ba";
    float: left
}
.hasChildren.active:before{
    content: "\25bc";
}

我的 HTML:

<div class="large-4 medium-4 columns menu-wrapper">
    <div class="panel">
        <h4>Menu</h4>
        <ul class="side-nav">
             <li><a href="#">Link 1</a></li>
             <li><a href="#">Link 2</a></li>
             <li><a href="#">Link 3</a></li>
             <li><a href="#">Link 4</a></li>
             <li><a href="#">Link drop</a>
                 <ul class="side-nav">
                     <li><a href="#">Link 1</a></li>
                     <li><a href="#">Link 2</a></li>
                     <li><a href="#">Link 3</a></li>
                     <li><a href="#">Link 4</a></li>
                 </ul>
             </li>
         </ul>
     </div>
</div>

jQuery:

$('.side-nav li:has("ul")').children('ul').hide(); //hide submenu
$('.side-nav li:has("ul")').addClass('hasChildren'); // add class to li ul child
$('.side-nav li:has("ul")').click(function(){
$(this).toggleClass( "active" ) // add active class to clicked menu item
    $(this).children('ul').slideToggle(); //toggle submenu
});

Image describing my problem

My problem on jsFiddle

Answer 1

使用相对定位，像这样:

.hasChildren:before{
    content: "\25ba";
    float: left;
    position: relative;
    top: 6px;
}
.hasChildren.active:before{
    content: "\25bc";
}

更新的 fiddle :

http://jsfiddle.net/vpoycbzb/1/