How do I fix the spacing of the arrows on Kendo menu items with children?

Question

I have a horizontal Kendo menu as my main navigation menu. On those menu items that have children, it has a right-arrow against the end of the menu item text, but right against it, with almost negative spacing. I have tried adding padding-left, margin-left, and tried the :before and :after pseudos, and the only difference was when I used the :after pseudo with content: "&nbsp", it actually put in the literal five character string,   Using a space, i.e. content: " " had no effect.

A user has to click a menu item with children to make it drop down for some reason, although I suspect there is also a hover condition that just never works, so the arrow is the only indication to a user that a menu item has children and it must be clicked to see them. My only solution at the moment is to use jQuery to remove the blasted arrows, and use the answer to my question How do I make a Kendo Menu open on hover, not on click? to make menu items with children automatically drop down.

Does anyone on this green Earth know how to get a decent spacing between the arrow and the menu item text, and would they mind sharing it, or are they holding it for a very handsome ransom?

Here is a pic of the menu:

Answer 1

If your menu is anything like http://demos.kendoui.com/web/menu/orientation.html with horizontal orientation, then you need to change:

 .k-menu .k-item>.k-link>.k-i-arrow-e {
     right:0px;
 }

It's absolutely positioned so you need to play with top/left/bottom/right to get it where you want to, and also why the margins don't seem to have effect