Changing Spry Menu Background

Question

So I decided to spice up my page a little by adding a
background image to my spry menu buttons.
After creating an image I went to "ul.MenuBarVertical a" and
set my new image as the background, worked fine.
Same image with a triangle on right for a submenu button in
"ul.MenuBarVertical a.MenuBarItemSubmenu" worked fine.
Hover image in "ul.MenuBarVertical a:hover,
ul.MenuBarVertical a:focus" works fine.
But I can't seem to change the background image for hovering
over a submenu button. I assumed it would go in "ul.MenuBarVertical
a.MenuBarItemSubmenuHover" but when I hover over it the image just
isn't right. I've looked at all the rules for my spry menu and have
no idea what is wrong, help please, thanks in advance.

Answer 1

It is always best to read the comments within the CSS.
For instance, the first lot of style rules come under the heading
LAYOUT INFORMATION: describes box model, positioning, z-order
Then there are style rules that come under the heading of
DESIGN INFORMATION: describes color scheme, borders, fonts
Other headings are
SUBMENU INDICATION: styles if there is a submenu under a given menu item
and
BROWSER HACKS: the hacks below should not be changed unless you are an expert
As for highlighting there are the following
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #33C;
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #33C;
    color: #FFF;
Gramps