PNG and IE7 problem...

[jet71dl]

I'm having a problem with IE7 and a drop down 'menu'... the background of the menu is an image which is a .png that has a drop shadow (which is part of the image...not a CSS drop shadow.).

The Problem:
In IE7 the drop shadow shows up as just plain solid black and even if I take the drop shadow off, black still shows up around the edges... This happens only in IE7 and I haven't been able to figure out why this is happening... I wasn't sure if this should go in the CSS forum or Other forum since it uses both CSS and jQuery.

Example Page: http://www.cnsg-host.com/test/topMenu.php
CSS: http://www.cnsg-host.com/test/style.css

Thank you for any assistance!

[jet71dl]

Ok, i've narrowed down the problem and it's with the jQuery and not the CSS. If a forum mod wants to move this topic feel free to do so.

Here's the jQuery that controls the menu:

$(document).ready(function() {
	
	function megaHoverOver(){
		
		$(this).find(".sub").stop().fadeTo('fast', 1).show();

			$(this).calcSubWidth();
			//Set Width
			$(this).find(".sub").css({'width' : rowWidth});	
	}
	
	function megaHoverOut(){ 
	  $(this).find(".sub").stop().fadeTo('fast', 0, function() {
		  $(this).hide(); 
	  });
	}



	var config = {    
		 sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)    
		 interval: 100, // number = milliseconds for onMouseOver polling interval    
		 over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
		 timeout: 200, // number = milliseconds delay before onMouseOut    
		 out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
	};

	$("ul#topnav li .sub").css({'opacity':'0'});
	$("ul#topnav li").hoverIntent(config);
});

I can add:

.css('filter', 'none')

to here:

$(this).find(".sub").stop().css('filter', 'none').fadeTo('fast', 1).show();

But it cancels out the fadeTo in IE... How would I add it so it wont cancel the fading? Thanks.

I've updated the link above.