css - 单击选择框隐藏 CSS 下拉菜单

Question

我有一个 CSS 下拉块，如下所示，下拉块包含一个select框。除了选择框外，一切都按预期工作。一旦我单击选择框，该块就会消失。这是JSFiddle显示确切问题的示例：

#ddul {
    background: #eee;
    padding: 15px;
    list-style: None;
    display: none;
    position: absolute;
    top:5px;
    left:0;
}

.dd:hover ul#ddul {
    display:block;
    position: relative;
}

这种行为的可能原因是什么？谢谢。

更新：

刚刚意识到它在 Firefox 上运行良好，但在 Chrome 上却不行。

更新：

适用于 chrome 以及 MAC，但不适用于 Ubuntu (Ubuntu V.12.04)

Answer 1

我认为原因可能是当您选择一个项目<ul></ul>时再次向上移动。所以你的鼠标的位置在 ul 部分下 -> 它不再悬停 -> 没有更多可见的下拉菜单

如何解决它（我猜不是太温和的方式）：

1 / 如果您不喜欢这种方式，您可以设置（最小）悬停高度，<div>这样即使选择其中一个选项，您也会将鼠标悬停在 div 上。

演示：http: //jsfiddle.net/goodfriend/gTbyE/4/

2/ 将选择放在菜单顶部，或者我认为这也会产生魔力：]

Answer 2

在隐藏元素上使用active伪类解决了这个问题。

ul#ddul:active,
.dd:hover ul#ddul {
    display:block;
}