Position div ontop of active select box

Question

I have a dropdown menu which I want to position ontop of everything else. However if I click on a select and then hover over my dropdown menu the select options appear ontop of the menu. How can I get the hovered menu to appear ontop of the select?

Sample code

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

Answer 1

An easy fix would be to hide / show the select input on hover. Like this:

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

However I think this is not a very good solution, but the only one I can come up with :/

Answer 2

A better solution is with an iframe in the background. You can look at Stu Nicholls' example: http://www.cssplay.co.uk/menus/iframe-shim.html

or just do a google search: http://www.google.at/search?q=css+selectbox+iframe and you will find plenty of examples.

This is the only way, I know of, to do this cross browser.