jquery hover problem on IE

I have just using the jquery hover :

$.each(navItems, function(i){
    $(navItems[i]).hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show();
    },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
    });
});

I works fine on all browser except IE. I have looking for t开发者_如何学JAVAhe others code that work fine in all major browsers(include IE), normally they also using same the way i did. Anybody can help me to explain what i wrong? full code on here : http://jsfiddle.net/XrMNr/

All you need is this:

$(".NaviItem").hover(function() {
    $(this).find('ul:first').show();
}, function() {
    $(this).find('ul:first').hide();
});

• Select your target elements simply with .NaviItem. This will return all elements with class NaviItem
• You don't need to iterate using each(). In this case the hover handler is applied to all occurrences of .NaviItem
• To show/hide you don't need to set the css, just use show() and hide(), or some animation function like fadeOut/fadeIn.

Why is your hover in a loop? Have you tried...

$('.NaviItem').hover(function(){
    $(this).find('ul:first').css({visibility: "visible", display: "none"}).show();
},function(){
    $(this).find('ul:first').css({visibility: "hidden"});
});