点击选择框隐藏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上却没有。

更新

也可以在MAC上使用chrome，但不能在Ubuntu（Ubuntu V.12.04）上使用

Answer 1

我认为原因可能是当您选择一个项目时<ul></ul>再次向上移动。所以鼠标的位置在ul部分下 - ＆gt;它不再徘徊 - ＆gt;没有更明显的下拉

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

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

DEMO： http://jsfiddle.net/goodfriend/gTbyE/4/

2 /将选择放在菜单的顶部或者那也是我想的魔法：]

Answer 2

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

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