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

前端之家收集整理的这篇文章主要介绍了html – 选择选项打开下拉菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用一个下拉菜单和一个带有选择下拉菜单的表单.

问题是当我打开窗体中的下拉菜单并选择第一个选项(“1”)时,菜单自动打开.

如果我使用一些< br>或者在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>

解决方法

这是一个Chrome(Blink?)相关的错误. Chrome尝试在光标位置“重置”菜单悬停状态.你可以尝试这个脏的解决方案:

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 site上报告这个bug

更新

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

猜你在找的HTML相关文章