Question

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');
                });
            }

Answer 1

Try adding this to your code:

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