Now this is a little hard to explain, but I have a mega menu and when you hover over the products <a> it drops down and reveals the mega menu. Now, when your mouse is over the links that are actually in the menu, and you take it off the original products link, the products button stays in it hover state. However, this is not the case in IE, the original products button leaves its hover state whenever you hover over the links in the drop down mega menu. I have tried fixing it in CSS, but it just won't work. (Please don't say it is the DOCTYPE, because the site host I am using will not let me change it.../ So, I wanted to write a little jquery to change the CSS of the original products hover state when the links beneath it are hovered over. This is what I have, but I can't really get it to work. Any help would be greatly apprecitated!


			$(li.products).css('background-image','url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -144px -63px;')

the uls with the links in it are in a div named 'sub', and when they are hovered over the li.products should change its CSS to what is mentioned.

link to the page


Thanks so much!