CSS selector nightmare

I've been building a simple menu with a jQuery plugin called Superfish. I'm almost there with it except for that one last really annoying thing. I added a class so that sub-menus can drop down to the right instead of the left and I've added a new arrow sprite for right-pointing arrows. It behaves as I want it with one exception. Here's the link: http://richswebarchive.com/terrificart/home/rico_index.php

If you hover on 'Artwork' and then on 'Choose By Both' and move into a further sub-menu the arrow in the 'Choose by Both' box开发者_运维百科 turns back to the left. The behaviour in further sub-menus is correct, the problem is just at this first level. I've tried fiddling with the css loads but I can't seem to fix it.

If anyone could help me out with this I'd be most grateful. Thanks.

You're resetting the background image somewhere in a third level LI (or UL). Check your CSS for any place the right-pointed image is called and create a new selector overwriting the arrow with an arrow pointing to the left.

The parent element (to write the selector) is .leftdrop.

In this code block at line 158 in the Suprfish CSS:

/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
}

Change the background position to backgroind-position: -10px 100px; This might fix the issue. I haven't been able to test it, but see if that helps.