Выбор опции выбора Открывает раскрывающееся меню

Я использую раскрывающееся меню и форму с выпадающим списком справа под ним.

Проблема заключается в том, что когда я открываю раскрывающийся список в форме и выбираю первый вариант ( "1" ), меню автоматически открывается.

Если я использую некоторый <br> или помещаю некоторый margin-top в форму div, это не произойдет, поэтому я думаю, что это имеет какое-то отношение к близости меню с формой, но я не могу выяснить, что происходит.

Вот пример того, что происходит (альтернативно, как 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>

Ответ 1

Это ошибка, связанная с Chrome (Blink?). Chrome пытается "reset" состояние наведения меню в позиции курсора. Вы можете попробовать это грязное решение:

Javascript (с JQuery):

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

И в вашем CSS:

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

Это защитит экран меню от "процесса восстановления".

Я предлагаю вам сообщить об этой ошибке на сайте Chromium Issues

Обновление

Этот JSFiddle демонстрирует оригинальную и фиксированную версию. Протестировано в Chrome 35.0.1916.153 на Debian 7.6.

Ответ 2

После попадания в этот вопрос HTML select триггеры css: hover on select У меня есть это решение, чтобы предложить, что это может быть полезно и здесь. для этого требуется только одна строка js:

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

Вы можете добавить скрытый селектор в соответствии с вашим случаем.