我正在使用一个下拉菜单和一个带有选择下拉菜单的表单.
问题是当我打开窗体中的下拉菜单并选择第一个选项(“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; }@H_404_9@<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>@H_404_9@
解决方法
这是一个Chrome(Blink?)相关的错误. Chrome尝试在光标位置“重置”菜单悬停状态.你可以尝试这个脏的解决方案:
Javascript(带JQuery):
$(function(){ $("select").click(function(){ $("body").addClass("select-activated"); setTimeout(function(){ $("body").removeClass("select-activated"); },200); }); });@H_404_9@在你的CSS中:
body.select-activated #nav ul { display: none; }@H_404_9@我建议你在Chromium Issues site上报告这个bug
更新
This JSFiddle演示了原版和固定版本.在Debian 7.6上的Chrome 35.0.1916.153中进行了测试.