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: '▶';
}

Tip: Don't use special chars like this `▶`. Use its `HTML` encoded char instead. — emerson.marini, Dec 31 '14 at 11:52
Im new on css, may i ask whats wrong with special characters? — CanESER, Dec 31 '14 at 11:55

score 1 · Accepted Answer · answered Dec 31 '14 at 11:51

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: '▶';
}

answered Dec 31 '14 at 11:51

Akshay

14,138
5
46
70

how to align the arrow in menu item?

1 Answers1