Question

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 the 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/

Answer 1

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.