选择选项打开下拉菜单 [英] Choosing Select Option Opens the Dropdown Menu
问题描述
我使用下拉菜单和一个带有下拉选择下拉菜单的表单。
I am using a dropdown menu and a form with a select dropdown right under it.
问题是，当我打开表单中的下拉菜单并选择第一个选项（1）会自动打开菜单。
The problem is that when I open the dropdown in the form and select the first option ("1") the menu automatically opens.
如果我使用一些< br> 一些margin-top在形式div，这不会发生，所以我认为它有关的菜单与形式的接近，但我不能弄清楚发生了什么。
If I use some <br> or put some margin-top in the form div, this doen't happen, so I think It has something to do with the proximity of the menu with the form, but I can't figure out what is going on.
以下是发生的情况的示例（或者作为 jsfiddle ）：
Here is an exemple of what is happening (alternatively as a 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>
推荐答案
此问题 HTML选择触发器css：hover on select 我有此解决方案这可能是有用的在这里以及。它只需要一行js：
After falling into this issue HTML select triggers css:hover on select i have this solution to propose that could be usefull over here as well. it requires only one line of js:
$(".form select").on("change", function(){$("#nav ul").hide(); $(".form form").submit();});
您可以根据个案添加隐藏选择器。
You can add hide selector according to your case.
这篇关于选择选项打开下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
