Problem with jQuery menu in IE6/7/8. Links disappear

I've got a bizarre problem with my menu for a site I'm making. And it's concerns - of course - Internet Explorer (all versions). When I move cursor over menu element it's shows one time and then disappears. You can check this under IE here: link to the site After this every menu element's are not clickable :-[

PS. I just want to add, that instead of *.png background I tried *.jpg and *.gif with no result.

Ok. I've got menu.js

$('#nav a').hover(function(){
    $(this).stop().animate({开发者_StackOverflowopacity: 1}, 'slow');},
    function(){
    $(this).stop().animate({opacity: 0}, 'slow');
});

in css there's:

body#start ul#nav {background: transparent url('../img/buttons_bckgd.png') no-repeat 0 0;}

#top_menu #nav li {float: left;}

#top_menu #nav li a {
   display: block;  
   height: 60px;
   margin-top: 7px;
   opacity: 0;
   }

.home {
   width: 163px;
   margin-left: 12px;
   }

.home:hover {background: url('../img/buttons_bckgd.png') no-repeat -12px -382px;}

html part is a pure standard:

<ul id="nav">
   <li><a class="home" href="#"></a></li>
   <li><a class="offer" href="#"></a></li>
   <li><a class="gallery" href="#"></a></li>
   <li><a class="contact" href="#"></a></li>
</ul>

Any ideas why vanishes and how to solve this?

That is very weird. I set up an example for you based on your code. http://jsfiddle.net/Ruhley/emHFY/. It works for me on IE7, what about you?

OK, second attempt :-) I did some testing http://jsfiddle.net/7h6Vn/ which should work in all browsers. However the key CSS property that I needed to add to make it work in IE6 is the background-color: white; line in the #nav li a rule. If you take that out then the hover animation is broken after the first time.

I only have IE6 so this may not solve the problem for all IE versions.

Edit: This seems to fix the hovering but you might have to play with setting the background-color to something different for your menu.

Also crediting the site that jogged my memory about the background-color fix - http://www.useragentman.com/blog/2010/09/02/how-to-make-cleartype-font-face-fonts-and-css-visual-filters-play-nicely-together/

Edit 2: OK, this http://jsfiddle.net/7h6Vn/1/ definitely works (mouse over the result area). I'm linking to your image to show the hover fade animation. Whilst playing around to get this working I also experienced the same problem as was solved here. One last point to note is that I needed to add the CSS opacity filter for IE which is non-standard, so you might want to put that in a separate IE specific CSS file.

I'm not sure this is exactly what you want but it was fun playing around with this nonetheless.

Can you place the code in the same page instead of a different script file.

Opening IE8 developer tools and debugging the menu.js script shows that when the mouse is hovered the second time, the code is not executed.

Try adding the event wireup only when the document is ready, something similar to:

$(document).ready(function() {
  // Do menu event wiring here...
});

...and add the script link include just before closing the body tag. It usually does the trick for me.

Is the DD_belatedPNG script interfering with the background image property? I know you said that you tried with different image types but have you tried removing the PNG fix script? This is not present in http://jsfiddle.net/Ruhley/emHFY/ which might explain why it works in that demo and not on your site.