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

概述我正在使用一个下拉菜单和一个带有选择下拉菜单的表单. 问题是当我打开窗体中的下拉菜单并选择第一个选项(“1”)时,菜单将自动打开. 如果我使用一些< br>或者在div中放一些边际顶点,这样做不会发生,所以我认为这与菜单与表单的接近有关,但是我无法弄清楚发生了什么. 这是发生的一个例子(或者作为jsfiddle)： #menu { position: relative; 我正在使用一个下拉菜单和一个带有选择下拉菜单的表单.

问题是当我打开窗体中的下拉菜单并选择第一个选项(“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 – 选择选项打开下拉菜单全部内容，希望文章能够帮你解决html – 选择选项打开下拉菜单所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。