Need finishing touches to this menu - just cant get it

Here is a working example of a menu I am working on. It is working perfectly except for a few tweaks I just cant seem to get.

View it here:
http://ksm.fm/misc/nav1

Here is what I am trying to do:

  1. When you hover over a main menu item, the background image disappears. For some reason I cant get the background image and the background color to appear at the same time.

  2. When you move your mouse down the dropdown menu, the background gray of the main menu item disappears. I want to keep the gray box on the main menu item highlighted as you mouse down the dropdown menu.

Here is my CSS
www.ksm.fm/misc/nav1/default.css
www.ksm.fm/misc/nav1/default.advanced.css
www.ksm.fm/misc/nav1/dropdown.css

PS- I’ve also attached the working files

  1. When you hover over a main menu item, the background image disappears.
  1. When you move your mouse down the dropdown menu, the background gray of the main menu item disappears.

Hi,
It’s not disappearing, the anchor’s BG color (on hover) is covering it up.
If you were to put a 2px left margin on a:hover (for the sake of testing) you would see that the BG image is still there.

Get rid of those inline styles you are using on the main list items. That’s where you are setting the BG image that gets covered up, the shorthand BG property you are using there is defaulting the BG color to transparent.

Style it through your CSS and then you can set the BG color on li:hover instead of a:hover. That will solve your 2nd problem too.

thank you!