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 :/