单击“选择框”可隐藏CSS下拉列表

我有一个CSS下拉框，如下所示，下拉框包含一个

select

框。除“选择”框外，所有操作均按预期进行。我一单击“选择”框，块就会消失。下面是一个显示确切问题的示例：

#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）上不行。

我想原因可能是当你选择一个项目时，

会再次上移。因此，鼠标的位置位于ul部分->不再悬停->不再可见下拉列表下

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

1/如果您不喜欢这种方式，您可以为悬停的

设置（最小）高度，这样即使在选择其中一个选项时，您也可以将鼠标悬停在div上

演示：

---

2/将select放在菜单的顶部或是什么也会起到神奇的作用：

在隐藏元素上使用

活动的

伪类可以解决这个问题

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

---

我认为这是chrome的一个缺陷，因为它在其他浏览器上运行良好。可能FF没有那么严格，或者ul区域更大。。我想它有自定义的边距。我总是对

和

的不同填充/边距有问题。这台电脑上的IE甚至无法正确显示JSFIDLE.net，因此D