Spry Vertical Menu Arrow Cursor

Question

I have created a vertical menu, I am using the word immunization in the menu.  The problem that I am having is the pointer at the end of immunization is on the n at the end of the word.  I have tried resizing every area up to 12 em, but it just doesn't move that arrow.  The arrow seems stuck in the same place.  I tried downsizing the font, but the arrow stays on the n no matter how small I make the font. Anyone know how to move the arrow?

Answer 1

The arrow is applied as a background image, applied to the a text.
ul.MenuBarVertical a.MenuBarItemSubmenu
     background-image: url(SpryMenuBarRight.gif);
     background-repeat: no-repeat;
     background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
     background-image: url(SpryMenuBarRightHover.gif);
     background-repeat: no-repeat;
     background-position: 95% 50%;
Although the comments indicate that the arrows are positioned on the far left, they are actually positioned on the far right, 95% of the distance from the left edge of the element.
The a element has been set as a block element (it takes up the entire li in which it resides) and has been given a padding, which allows the background arrow space to appear, clear of text:
ul.MenuBarVertical a
     display: block;
     cursor: pointer;
     background-color: #EEE;
     padding: 0.5em 0.75em;
     color: #333;
     text-decoration: none;
If your arrow is bumping your text, and the arrow is the size you want, increase the horizontal (left and right) padding...boldened in the quote above...to make the li wider. If this does not suit, you can also increase the percentage distance from the left a few percentages, to fully nest the arrow in the right padding.
Beth