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.