Solving the "form elements show through pop-up menu layer" problem

Pop-up menus are a nice feature of Macromedia Dreamweaver and other programs. Supported by most current browsers, they use layers to create little pop-up (or drop-down if you prefer) menus, allowing users to quickly navigate your site. Unfortunately, some form elements such as SELECT boxes (also known as list-boxes or drop-down menus) show THROUGH your pop-up menus, making the menus ugly and sometimes even unusable.

This is caused by the fact that some form elements are actually rendered by the operating system, not the browser, so no matter how you order things with Z-Index etc. the operating system renders the form elements last, putting them on top of everything else.

The solution / workaroundThere is no way to stop the operating system from rendering the form elements last, so what can we do? How about... not render them at all! Basically our workaround is to make the form elements disappear whenever a pop-up menu appears, so that the form elements will not be rendered over top. Now this sounds a little bit odd but in practice it's actually not as noticeable as it sounds, because your attention is focused on the menu item you are moving your mouse to, waiting for the menu to pop up, reading the items in the menu etc. You hardly even notice that the SELECT elements on the page disappear when the pop-up menu appears.

Possibly not the most elegant solution, but it works and it made my client happy on a particular job.

How to do it

1. download the modified mm_menu.js file by clicking here

2. unzip the .js file and put it in your site, overwriting the mm_menu.js file which Dreamweaver creates (keep a backup if you want).

3. make sure your forms are always called "FORM1" (e.g. your form tag looks something like this: