Why doesn't a select dropdown allow me to clic

Question

I am using the jquery mega dropdown menu plugin. In one of the menus, I wanted to add a dropdown box. It works fine in Firefox, Chrome (as seen in screenshot below)

but in IE, when i click on the select dropdown and hover over one of the item in the select for more than a second, the whole menu disappears (as if it thinks that i am no longer hovering over the menu.

I am able to reproduce the issue on this example (click on "Sales")

Any suggestions on how to get a select dropdown showing up on jquery mega menu

Answer 1

I would guess IE assumes you have left focus from the drop-down menu when you click on a select box, so it tries to hide the menu. You'll have to fix the library code to verify that you are no longer hovering over the menu AND a select box does not have focus. One place to start is the function. Perform your checks first before hiding the menu.

function megaOut(){
            var subNav = $('.sub',this);
            $(this).removeClass('mega-hover');
            $(subNav).hide();
            // beforeClose callback;
            defaults.beforeClose.call(this);
        }

Answer 2

The cause of your issue is the plugin's code itself. The probelm: IE does not consider its "select elements" as part of the actual select option.

Adding this to your jquery code should solve the problem:

 $(".mega-hover select").mouseleave(function(event){
    event.stopPropagation();
  });

Please keep me posted.

Answer 3

Which version of IE are you having problems with? It works OK in IE7 and IE8 - see sub-menu for "Sale":

LINK EDITED:

http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/menu2.html