Html 选择选择选项打开下拉菜单

我使用的是一个下拉菜单和一个表单，它下面有一个选择下拉菜单

问题是，当我打开表单中的下拉列表并选择第一个选项（“1”）时，菜单会自动打开

如果我使用一些

或在表单div中添加一些边距，这不会发生，因此我认为这与菜单与表单的接近程度有关，但我不知道发生了什么

下面是正在发生的事情的一个例子（或者作为一个例子）：

#菜单{
位置：相对位置；
z指数：1；
明确：两者皆有；
}
#导航{
高度：39px；
字体：14px Arial，Verdana，无衬线；
背景：#f8f8；
边框：1px实心#DDDDDD；
边界半径：3px；
最小宽度：500px；
左边距：0px；
左侧填充：0px；
}   
#李海军{
列表样式：无；
显示：块；
浮动：左；
高度：40px；
位置：相对位置；
右边框：1px实心#DDDDDD；
}
#李娜{
填充：0px 30px 0px 30px；
边际：0px0；
线高：40px；
文字装饰：无；
右边框：1px实心#DDDDDD；
高度：40px；
颜色：#6791AD；
字体大小：粗体；
}
#导航ul{
背景#f2f5f6；
填充：0px；
边框底部：1px实心#DDDDDD；
右边框：1px实心#DDDDDD；
左边框：1px实心#DDDDDD；
边界半径：0px 0px 3px 3px；
盒子阴影：2个2个3个#ECECEC；
-webkit盒阴影：2px 2px 3px#ECECEC；
-莫兹盒阴影：2px2p3px#ECECEC；
宽度：200px；
}
#李导航：悬停{
背景：白色；
}
#李娜{
显示：块；
}
#李国荣{
边界权：无；
边框底部：1px实心#DDDDDD；
宽度：200px；
高度：39px；
}
#李丽娜{
背景#f2f5f6；
填充：0px；
边框底部：1px实心#DDDDDD；
右边框：1px实心#DDDDDD；
左边框：1px实心#DDDDDD；
边界半径：0px 0px 3px 3px；
盒子阴影：2个2个3个#ECECEC；
-webkit盒阴影：2px 2px 3px#ECECEC；
-莫兹盒阴影：2px2p3px#ECECEC；
宽度：200px；
}
#nav ul li ul{
背景#f2f5f6；
填充：0px；
边框底部：1px实心#DDDDDD；
右边框：1px实心#DDDDDD；
左边框：1px实心#DDDDDD；
边界半径：0px 0px 3px 3px；
盒子阴影：2个2个3个#ECECEC；
-webkit盒阴影：2px 2px 3px#ECECEC；
-莫兹盒阴影：2px2p3px#ECECEC；
宽度：200px；
}
#海军ulli a{
边界权：无；
颜色：#6791AD；
文本阴影：1px 1px 1px#FFF；
边框底部：1px实心#FFFFFF；
}
#nav ul li:悬停{背景：#DFEEF0；}
#nav ul li:最后一个子项{边框底部：无；}
#nav ul li:最后一个孩子a{边框底部：无；}
/*子菜单*/
#导航ul{
显示：无；
可见性：隐藏；
位置：绝对位置；
顶部：40px；
}
/*三级菜单*/
#导航ul{
顶部：0px；
左：200px；
显示：无；
可见性：隐藏；
边框：1px实心#DDDDDD；
}
/*四级菜单*/
#导航ul{
顶部：0px；
左：170px；
显示：无；
可见性：隐藏；
边框：1px实心#DDDDDD；
}
#李国荣{
显示：块；
能见度：可见；
}
#导航李：悬停>ul{
显示：块；
能见度：可见；
}

1.
2.
3.

这是一个与Chrome（闪烁？）相关的bug。Chrome试图在光标位置“重置”菜单悬停状态。您可以尝试以下脏解决方案：

Javascript（带JQuery）：

$(function(){
    $("select").click(function(){
        $("body").addClass("select-activated");
        setTimeout(function(){
            $("body").removeClass("select-activated");
        }, 200);
    });
});

body.select-activated #nav ul {
    display: none;
}

并且在CSS中：

$(function(){
    $("select").click(function(){
        $("body").addClass("select-activated");
        setTimeout(function(){
            $("body").removeClass("select-activated");
        }, 200);
    });
});

body.select-activated #nav ul {
    display: none;
}

这将保护菜单显示不受“恢复过程”的影响

我建议你在网上报告这个错误

更新

---

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

陷入这个问题后，我提出了这个解决方案，在这里也很有用。它只需要一行js：

$(".form select").on("change", function(){$("#nav ul").hide(); $(".form form").submit();});

---

您可以根据您的情况添加隐藏选择器。

我在chrome中，没有看到您所说的行为。如果你的鼠标在选择了一个选项后悬停在菜单上，那么，菜单将打开。我可以在多台计算机的Chrome窗口上重现这一点。非常奇怪的问题我也可以重现。是的，我在谷歌Chrome（Windows8.1）中也看到过，但在firefox中也可以……有趣的错误也在Windows8.1的Chrome中重现。IE表现正常，但为什么Chrome会触发菜单悬停状态？OP已经提到了一个有效的解决方案（仅使用

br

）@Zach Saucier这显然是一个（严重的）错误。使用

标记从菜单悬停区域替换select元素不是一个（真正的）解决方案。我在读了你的答案并在这里面对同样的问题后向chromium报告了此事