html - 如何对齐菜单项中的箭头？

Question

我有一个这样的菜单，如果任何项目有子项目，我就有箭头，我使用 css 内容属性来放置箭头，但我不能将箭头对齐到行尾。

<ul id="menu-bar">
    <li><a>homepage</a></li>
    <li><a>about us</a></li>
    <li><a>services</a>
        <ul>
            <li><a>service 1</a>
                <ul>
                    <li><a>service 1A</a></li>
                    <li><a>service 1B</a></li>
                </ul>
            </li>                                    
        </ul>
    </li>
</ul>

这是我的CSS

#menu-bar:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#menu-bar li ul li > a:after {
    content: '▶';
}

Answer 1

如果你想把它对齐到右边试试这个http://jsfiddle.net/omcuL0vw/

#menu-bar li ul li > a:after {
float:right;
content: '▶';
}