Question

我正在使用下拉菜单和一个带有选择下拉菜单的表单。

问题在于，当我打开表单中的下拉菜单并选择第一个选项（＆＃34; 1＆＃34;）时，菜单会自动打开。

如果我使用一些<br>或在表单div中放置一些margin-top，这不会发生，所以我认为它与菜单与表单的接近程度有关，但是我无法弄清楚发生了什么。

以下是正在发生的事情的例子（或者作为jsfiddle）：

＆＃13;

    #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;
    }

＆＃13;

<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>

＆＃13;

Answer 1

这是Chrome（Blink？）相关的错误。 Chrome会尝试重置＆＃34;菜单悬停状态在光标位置。你可以尝试这个肮脏的解决方案：

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

这将保护菜单显示免受＆＃34;恢复过程＆＃34;。

我建议您在Chromium Issues site

上报告此错误

<强>更新

This JSFiddle演示了原始版本和固定版本。在Debian 7.6上的Chrome 35.0.1916.153中进行了测试。

Answer 2

在陷入这个问题之后HTML select triggers css:hover on select我有这个解决方案，建议在这里也可以使用。它只需要一行js：

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

您可以根据自己的情况添加隐藏选择器。

选择选择选项打开下拉菜单

2 个答案: