Ugly jQuery effect on IE 8.0

Hello here,
I am working on a nice drop down menu effect by using jQuery:

http://www.virtualsheetmusic.com/testWin.html

It works perfectly on Firefox and Safari, but on IE 8.0 on Windows it makes an ugly black shadow beyond the dropped menus at the beginning of rendering. Any idea? Is that something avoidable or is that one of the usual annoying “IE” bugs?

Here is the simple code I used for that effect:

function mainmenu(){
jQuery(" #nav ul ").css({display: "none"}); // Opera Fix
jQuery(" #nav li").hover(function(){
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(200);
        },function(){
        jQuery(this).find('ul:first').css({visibility: "hidden"});
        });
}

 
 
 jQuery(document).ready(function(){                    
    mainmenu();
});

Any thoughts and/or suggestions are very welcome!

Thank you in advance.

Best,
Fab.

It seems you are using semi tranparent PNG’s and animating them.
Sadly, this doesn’t seem to work with IE8.
If looked vervently for solutions for this annoying problem, but still haven’t found one.

If this problem also occurs in IE6 and/or IE7 (and it probably does), you can use DD_belatedPNG for those two.

Thanks to Microsoft, who ripped the support for VML in IE8 (unless you use quirks mode it seems), this doesn’t work for IE8… don’t get me started on this :x

Thank you for your reply. I really thought that transparent PNGs were well handled by IE 8! How can it have still problems with them??? What a shame…

Any different solution?

Thank you again.

Best,
Fab.