Html 如何定位"；：“之前”；在zurb foundation中用作图标的元素'；s侧导航？

我向基金会的侧导航添加了一个子菜单，与示例中完全相同，但图标位于文本上方

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

---

使用相对定位，如下所示：

.hasChildren:之前{
内容：“\25ba”；
浮动：左；
位置：相对位置；
顶部：6px；
}
.有孩子。活动：在{
内容：“\25bc”；
}

您能发布完整的代码吗？

$('.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
});