jQuery Navigation not working in IE7

Question

Hello,

I have the following code in a project for the main navigation. It is essentially a css-sprite that is overlayed once the user hovers over the menu. This is working perfectly in every browser except IE7 (ie6 not tested). I have tried debugging my css and feel this is coming from jQuery / JS code specifically. Is there some jQ code I may be using that is causing the error? Any and all help is appreciated.

The issue is that once hovered the span is not showing in IE7. All other browsers work a-okay.

  jQuery('#menu-main-navigation').find('li > a')
         .append('<span class="hover"></span>')
         .hover(function() {
              jQuery('.hover', this)
                .stop()
                .animate({
            opacity: 1
                }, 400 )
            }, function() {
           jQuery('.hover', this)
            .stop()
            .animate({
               opacity: 0
             }, 300)
             });                
          jQuery("#menu-main-navigation a").find('.hover').css({opacity:0})

Thank you in advance,

J

Answer 1

IE7 doesn't support opacity, you need filter: alpha(opacity=50);

It's not safe to code alone, take this http://www.quirksmode.org/css/opacity.html

Answer 2

The answer above is incorrect. jQuery does support opacity for IE7. It was a css issue after all, the positioning was off on the <li> tag.