Drop-Down Menu Visibility Problem

[Andrew888]

Hi there...I'm using some proprietary software and I'm not a Javascript guru by any stretch. In the HTML page we've got a <TABLE> and one row <TR> has a text link &quot;Menu Options&quot;. When the user clicks on this, a drop down menu appears (which I believe is contained in a <SPAN>. If you click anywhere else, the drop down menu disappears.

The problem is that a few <TR>'s down from &quot;Menu Options&quot; there is a <SELECT> input. When the user clicks &quot;Menu Options&quot; to open the <SPAN> menu, the <SELECT> that is a few rows down in the underlying table, shows up on top of the menu, partially hiding some of the options in the &quot;Menu Options&quot; menu.

Here is the code for the drop down menu contained in a cell:

<td class=&quot;mainmenuitems&quot;>
<ilayer height=14>
<layer visibility=show>
<span class=mainmenu onClick=&quot;dropit2 dropmenu0);event.cancelBubble=true;return false&quot;>
<a class=mainmenu href=alternate.htm onclick=&quot;if(document.layers) return dropit(event, 'document.dropmenu0')&quot;>Menu Options</a>
</span>
</layer>
</ilayer>
 </td>

A few rows down, there is the <SELECT>:

<td class=&quot;catcells&quot;>
<nobr>
<select name=&quot;category&quot; tabindex=&quot;4&quot; class=&quot;formentry&quot;>
<option value=&quot;*&quot; selected>all categories
<option value=&quot;COMP&quot;>Compensation Surveys
<option value=&quot;FOOD&quot;>LOMA's Grocery Store
<option value=&quot;RSCH&quot;>Research Reports
</select>
<input type=&quot;submit&quot; value=&quot;Go&quot; align=&quot;center&quot; valign=&quot;middle&quot; class=&quot;formentry&quot;>
</nobr>
</td>

So, the &quot;Menu Options&quot; <a> reference uses two Javascript functions: dropit and dropit2. Here is the code for those:

var zindex=100
function dropit2(whichone) {
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility=&quot;hidden&quot;
themenu=whichone
if (document.all) {
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (themenu.style.visibility==&quot;hidden&quot {
themenu.style.visibility=&quot;visible&quot;
themenu.style.zIndex=zindex++
}
else {
hidemenu()
}
}
}

function dropit(e,whichone) {
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility=&quot;hide&quot;
themenu=eval(whichone)
if (themenu.visibility==&quot;hide&quot
themenu.visibility=&quot;show&quot;
else
themenu.visibility=&quot;hide&quot;
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false
}

If anyone can please offer a solution to preventing the <SELECT> from showing up underneath the &quot;Menu Options&quot; menu, I'd appreciate it. The software company that generated this product has not researched the matter nor do they plan on it.

Thanks,
Andrew

 

[dwarfthrower]

Set the visibility of the select to 'hidden' prior to displaying the menu. Then set it back to 'visible' when the menu closes.

 

[Andrew888]

Thanks! I got the code modified to do just that and it has worked!

-Andrew