CSS menu pseudo element after not working in chrom

Question

I have created a pure CSS menu and it works great in all browsers except Chrome and Safari. The menu should display arrow on the right but it moves to bottom.

When I change white-space: nowrap; to white-space: normal; it works fine on all browsers except Chrome and Safari and when I set it to white-space: nowrap; it shows arrow to the bottom

Code: jsfiddle

Answer 1

Change :after to :before. It will still be floated right, but a new block context is not created by the <li> itself.

http://jsfiddle.net/ygtes/1/