jQuery Navigation not working in IE7

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 )
     开发者_如何学Go       }, function() {
           jQuery('.hover', this)
            .stop()
            .animate({
               opacity: 0
             }, 300)
             });                
          jQuery("#menu-main-navigation a").find('.hover').css({opacity:0})

Thank you in advance,

J

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

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.