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 ("1") the menu automatically opens.

If I use some <br> or put some margin-top in the form div, this doen't happen, so I think It has something to do with the proximity of the menu with the form, but I can't figure out what is going on.

Here is an exemple of what is happening (alternatively as a jsfiddle):

    #menu {
        position: relative;
        z-index: 1;
        clear: both;
    }

    #nav{
        height: 39px;
        font: 14px Arial,Verdana,sans-serif;
        background: #f8f8f8;
        border: 1px solid #DDDDDD;  
        border-radius: 3px;
        min-width:500px;
        margin-left: 0px;
        padding-left: 0px;
    }   

    #nav li{
        list-style: none;
        display: block;
        float: left;
        height: 40px;
        position: relative;
        border-right: 1px solid #DDDDDD;
    }

    #nav li a{
        padding: 0px 30px 0px 30px;
        margin: 0px 0;
        line-height: 40px;
        text-decoration: none;
        border-right: 1px solid #DDDDDD;
        height: 40px;
        color: #6791AD;
        font-weight: bold;
    }

    #nav ul{
        background: #f2f5f6; 
        padding: 0px;
        border-bottom: 1px solid #DDDDDD;
        border-right: 1px solid #DDDDDD;
        border-left:1px solid #DDDDDD;
        border-radius: 0px 0px 3px 3px;
        box-shadow: 2px 2px 3px #ECECEC;
        -webkit-box-shadow: 2px 2px 3px #ECECEC;
        -moz-box-shadow:2px 2px 3px #ECECEC;
        width:200px;
    }

    #nav li:hover{
        background: white;
    }
    #nav li a{
        display: block;
    }
    #nav ul li {
        border-right:none;
        border-bottom:1px solid #DDDDDD;
        width:200px;
        height:39px;
    }

    #nav ul li li {
        background: #f2f5f6; 
        padding: 0px;
        border-bottom: 1px solid #DDDDDD;
        border-right: 1px solid #DDDDDD;
        border-left:1px solid #DDDDDD;
        border-radius: 0px 0px 3px 3px;
        box-shadow: 2px 2px 3px #ECECEC;
        -webkit-box-shadow: 2px 2px 3px #ECECEC;
        -moz-box-shadow:2px 2px 3px #ECECEC;
        width:200px;
    }

    #nav ul li ul {
        background: #f2f5f6; 
        padding: 0px;
        border-bottom: 1px solid #DDDDDD;
        border-right: 1px solid #DDDDDD;
        border-left:1px solid #DDDDDD;
        border-radius: 0px 0px 3px 3px;
        box-shadow: 2px 2px 3px #ECECEC;
        -webkit-box-shadow: 2px 2px 3px #ECECEC;
        -moz-box-shadow:2px 2px 3px #ECECEC;
        width:200px;
    }

    #nav ul li a {
        border-right: none;
        color:#6791AD;
        text-shadow: 1px 1px 1px #FFF;
        border-bottom:1px solid #FFFFFF;
    }
    #nav ul li:hover{background:#DFEEF0;}
    #nav ul li:last-child { border-bottom: none;}
    #nav ul li:last-child a{ border-bottom: none;}
    /* Sub menus */
    #nav ul{
        display: none;
        visibility:hidden;
        position: absolute;
        top: 40px;
    }

    /* Third-level menus */
    #nav ul ul{
        top: 0px;
        left:200px;
        display: none;
        visibility:hidden;
        border: 1px solid #DDDDDD;
    }
    /* Fourth-level menus */
    #nav ul ul ul{
        top: 0px;
        left:170px;
        display: none;
        visibility:hidden;
        border: 1px solid #DDDDDD;
    }

    #nav ul li{
        display: block;
        visibility:visible;
    }
    #nav li:hover > ul{
        display: block;
        visibility:visible;
    }

<div id='menu'>
    <ul id='nav'>
        <li>
            <a href='#'>Level 1</a>
            <ul>
                <li><a href='#'>Level 1-1</a>
                    <ul>
                        <li><a href='#'>Level 1-1-1</a></li>
                        <li><a href='#'>Level 1-1-2</a></li>
                    </ul>   
                </li>
                <li><a href='#'>Level 1-2</a>
                    <ul>
                        <li><a href='#'>Level 1-2-1</a></li>
                        <li><a href='#'>Level 1-2-2</a></li>
                    </ul>   
                </li>
                <li><a href='#'>Level 1-3</a>
                    <ul>
                        <li><a href='#'>Level 1-3-1</a></li>
                        <li><a href='#'>Level 1-3-2</a></li>
                    </ul>   
                </li>
            </ul>
        </li>
    </ul>
</div>
<div class='form'>
    <form>
        <select>
            <option selected='true'> 1 </option>
            <option> 2 </option>
            <option> 3 </option>
        </select>
        <input type='button' value="Go"/>
    </form>
</div>	

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.