Annoying problem with Arrow Green Vertical Menu

[bongolier]

I get this menu to work but not quite in the way I want.

My test page is www.openskyshop.co.uk/testmenu.html.

You will see the menu contained within a box. I cannot see how to move the green menu to the left. I've looked at all the settings to no avail.

Using Firebug (absolutely fantastic extension to Firefox) you can inspect the element and see it is arrowgreen. CSS is at the bottom of file style.css

Anyone any ideas? Any help appreciated.

Thanks in advance

[bluewalrus]

Link doesn't work

[bongolier]

My deepest apologies!

It should work now.

(Been working locally and forgot to upload!)

[bluewalrus]

You have to change your image.

Your image http://www.openskyshop.co.uk/images/arrowgreen.gif is being shifted over 32 pixels to display the arrows on hover.


.arrowgreen li a:hover{
color: #26370A;
background-position: 100% -32px;
}


For an example

in this box the letter a will be the green and b will be the arrow

In the regular state you'll see the bbbb is there but hidden.

|aaaaaaaaa|bbbb

on hover this moves over 32 px and the b's are now in the box and some of the a's moved out


aaaa|aaaaabbbb|