Choosing Select Option Opens the Dropdown Menu

Question

I am using a dropdown menu and a form with a select dropdown right under it.

The problem is that when I open the dropdown in the form and select the first option (\"

Answer 1

This is a Chrome (Blink?) related bug. Chrome tries to "reset" the menu hover state at the cursor position. You can try this dirty solution:

Javascript (with JQuery):

$(function(){
    $("select").click(function(){
        $("body").addClass("select-activated");
        setTimeout(function(){
            $("body").removeClass("select-activated");
        }, 200);
    });
});

And in your CSS:

body.select-activated #nav ul {
    display: none;
}

This will protect the menu display from the "restoring process".

I suggest you to report this bug on the Chromium Issues site

Update

This JSFiddle demonstrates the original and a fixed version. Tested in Chrome 35.0.1916.153 on Debian 7.6.

Answer 2

After falling into this issue HTML select triggers css:hover on select i have this solution to propose that could be usefull over here as well. it requires only one line of js:

$(".form select").on("change", function(){$("#nav ul").hide(); $(".form form").submit();});

You can add hide selector according to your case.