我正在使用一个下拉菜单和一个带有选择下拉菜单的表单.
问题是当我打开窗体中的下拉菜单并选择第一个选项(“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中进行了测试.
