JavaScript Mouseover Drop Down Menu Falls Behind a regular HTML select element

[Codelesscode]

Apology for the JavaScript question in a Java Programming discussion board.

Problem:
On a HTML page, there is a JavaScript mouse drop down navigation menu on the top, and some HTML elements in the middle area.

When a mouseover event triggers the drop down menu to display its menu item. The menu item list overlapse the page and all of its HTML elements except the <select>...</select> element. The menu items are displayed under the <select> element rather than on top of it like with all other HTML elements. This behaviour onlys occurs for the <select> drop down item.

I've already tried z-index to try and remedy the problem, but it doesn't work. The issues here appears to be how elements are layered and displayed in a browser.

Thanks in advanced for any ideas and thoughts.

[seandwilkins]

Set the z-index to a negative number!

[Thread1]

Definitely it won't work because the SELECT tag is belong to the Windowed elements while the menu tag that you are using is belong to the Windowless element. These group of elements do not share the same z-order in fact they are separately displayed in the browser such that the Windowed plane is always on top of the Windowless plane in the z stack..

This is really unfortunate especially when the menu (TABLE tab) is always touching the SELECT tag, but it is really easy indeed to just change the page design so that it won't touch the SELECT tag anymore.. But I think of a way that, you could wrap the menu inside a Windowed element i.e., IFRAME so that the z-order will work on both Windowed element.