hoverIntent triggers 'out' function on select element

The code that follows is used for showing and hiding Mega Dropdowns. If you mouse-over a link with the class of 'dropDown', it's child '.dropPanel' shows. As long as your mouse is over either the link or the drop panel, the drop panel remains shown. Move the cursor anywhere but the link or the panel, and the panel is hidden. Pretty basic stuff.

In a few of these Mega Dropdowns there are forms that contain select elements. In Firefox, all is well. In IE (8 specifically, have not tested any other versions), if you mouse-over a select element in the drop panel, hoverIntent fires the 'out' function of dropPanelOff() and the drop panel hides.

How do I prevent this?

        // Apply Hover Intent to Menu Panels
        $(".dropDown").hoverIntent({
            sensitivity: 10, 
            interval: 150, 
            over: dropPanelOn, 
            timeout: 150, 
            out: dropPanelOff
        });

            // Menu Over function call
            function dropPanelOn() {开发者_如何学运维
                $('a[rel="dropLink"]', this).addClass('hover');
                $('.dropPanel', this).slideDown('fast');
            }

            // Menu Out function call
            function dropPanelOff() {
                obj = this;
                $('.dropPanel', this).slideUp(100, function(){
                    $('a[rel="dropLink"]', obj).removeClass('hover');
                    $('.dropLink span', obj).removeClass('hover');
                });
            }

Try adding this to your code:

$(".dropDown select").mouseout(function(e) {
        e.stopPropagation();
});

maybe you should just use the native hover event, you could add a delay to it also:

var time = false;
$(".dropDown").hover(function () {
   if ($("dropPanel", this).is(":hidden")) $("dropPanel", this).slideDown('fast');
   else window.clearTimeout(timer);
}, function () {
   var obj = $(this);
   timer = window.setTimeout(function () {obj.slideUp(100);}, 150);
});