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

Question

我有一个 CSS 下拉 block ，如下所示，下拉 block 包含一个 select 框。除选择框外，一切都按预期工作。只要我点击选择框， block 就会消失。这是一个 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/将选择放在菜单顶部或者其他什么也能发挥我认为的魔力 :]