how to align the arrow in menu item?

Question

I have a menu like that and i have arrows if any item has child items,I use css content property to put arrows but i cant allign arrows to the end of the line.

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

this is my 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

If you are trying to align it to the right try this http://jsfiddle.net/omcuL0vw/

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