I'm working on an HTML page with a drop-down on top. This page as some input text boxes and select menus.

Problem is that, when we place mouse cursor on drop-down menu, all options under this menu are shown underneath the text-boxes instead of being on front/top.

I've also attached a small snap-shot to give you some more detail on what i'm talking about.

What am i doing wrong or what i need to do to get this menu on top?

Im guessing you're using CSS to style the dropdowns and textboxes, try adjusting the z-index of the menus. You want the dop down menu to have a higher z-index than the textboxes.

http://css.somepeople.net/zindex

Tried assigning z-index to all layers and input boxes and tried http://www.experts-exchange.com/Web/WebDevSoftware/DreamWeaver/Q_20913131.html, but that hasn't help to fix the issue yet.

Thanks anyway.

The only possible solution to this problem (as of now) is to hide the "SELECT" element dynamically when the windowless elements are required to overlap the windowed element.

http://www.webreference.com/programming/javascript/form/2.html

Once you customize the code for your needs, it works like a charm.

If you search hard enough you will find article on microsoft.com where they say that this is not a bug but the limitation of Internet technology. I laughed at that. But in a same article they also say that select menu in IE is handled the same way as inline frame, which means that you cannot cover it with content from other frames. Only way to have this work (besides hiding of select menus on the page) is to change your menu to use iframes instead of divs, which it not way too difficult. If you decide on hiding though, I suggest you use background images that look as similar to actual menu as possible and place them behind selects. That will avoid some screen flicker as you hide and show select boxes and page will look smoother.