Pop-up menus in normal HTML pages are usually implemented using Layers (DIV tag). However, the leading browser applications in the market have this known problem with layers: if a pop-up menu is dropped down and there is a combo box form field underneath it, the pop-up menu layer fails to paint it over the combo box. That is, the combo box will be visible through the pop-up menu, or it appears to be on top of the menu layer.

The reason this happens is because browser applications always paint form fields like a combo box on the top most layer (the z-index property of the layer doesn’t work in this case).

In order to work around this problem, put a SPAN tag (with a style defined) around the combo boxes that will be covered if the menu is dropped down. When the menu is dropped down, set the ‘visibility’ property of the style to ‘hidden’. And when the menu item is clicked or the menu is hidden, set this ‘visibility’ property to visible again. This works well to solve the problem.