Select tag overlap in IE

Update: I have a new article that supports nested menus with instructions on use at Select tag overlap in IE, Part II. Please go to the new article as it give you information that is not available in this article.

Sometime ago I was asked if I knew of an IE fix to hide select elements when postitioning other elements over them.

Does anybody know of any javascript that will disable or hide the select element tag?

The problem only occurs in IE when the dropdown menu overlaps a select tag in form. It appears that nother will override the z-index of the select tag in IE exept to hide it.

This is a problem with IE in that select elements do not honor the z-index and will display over any other position element, like a dropdown menu. You can eliminate the problem by inserting an iframe shim underneath the drop down. It's not an original idea, I don't know where I found the solution. I modified the suckerfish drop downs javascript file to add an iframe shim. Unfortunately IE 5.0 does not support this method, so I simply hide select elements when using IE 5.0.

You can download it at topnav.js and see a sample with opacity of a single drop down menu here and a cascading vertical menu solution written by another author here.

UPDATE: The unknown author is Ilya I. Gerasimenko and a few fine sandbox experiments can be found at DOM Studies.

UPDATE: You see a temporary sample with opacity of a single drop down menu here.