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.