将div定位在活动的选择框上方

Question

我有一个下拉菜单，想要将其放置在所有其他元素之上。但是，如果我点击选择器，然后悬停在我的下拉菜单上，选择选项会出现在菜单之上。如何让悬停的菜单显示在选择器之上？

示例代码

http://jsfiddle.net/b2vak/6/

- Danny

Answer 1

一个简单的解决方法是在悬停时隐藏/显示选择输入框。像这样：

$("#menubar ul > li").hover(function() {
    $("#menu").show();
    $("select").hide();
}, function() {
    $("#menu").hide();
    $("select").show();
});

然而，我认为这不是一个很好的解决方案，但这是我能想到的唯一一个 :/

- r0skar

---

我认为这是一个有效的解决方案。我也想到了同样的事情。 - Stefano D

看起来没有其他办法。只要选择框打开，它就会在顶部。 - BNL

是的。我也想到了同样的解决方案，但我觉得这不是一个非常好的解决方案。我希望通过调整z-index属性来解决它 :-( - Danny

Answer 2

更好的解决方案是在后台使用iframe。您可以查看Stu Nicholls的示例：http://www.cssplay.co.uk/menus/iframe-shim.html，或者只需进行谷歌搜索：http://www.google.at/search?q=css+selectbox+iframe，您将找到很多示例。这是我知道的唯一跨浏览器的方法。

- topek