<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
1) Disappearing box that can't fire a mouseover event (starts visible as example):<br>
<select name="whatever" onMouseOver="this.style.visibility='visible';" onMouseOut="this.style.visibility='hidden';">
<option> A
<option> B
<option> C
</select><br>
2) Disappearing, Reappearing select box by using a div:<br>
<div onMouseOver="this.children[0].style.visibility='visible';" onMouseOut="this.children[0].style.visibility='hidden';"><select name="whatever" style="visibility:hidden;">
<option> A
<option> B
<option> C
</select>
</div>
3) Disappearing, reappearing select box with shortened div that also disappears onBlur for select box:<br>
<div onMouseOver="this.children[0].style.visibility='visible';" onMouseOut="this.children[0].style.visibility='hidden';" style="width:100px;"><select name="whatever" onBlur="this.style.visibility='hidden';" style="visibility:hidden;">
<option> A
<option> B
<option> C
</select>
</div>
4) Disappearing, reappearing select box with shortened div that also disappears onBlur for select box with a colored div to show that iut doesn't disappear:<br>
<div onMouseOver="this.children[0].style.visibility='visible';" onMouseOut="this.children[0].style.visibility='hidden';" style="width:100px;background-color:#aaaadd;"><select name="whatever" onBlur="this.style.visibility='hidden';" style="visibility:hidden;">
<option> A
<option> B
<option> C
</select>
</div>
As you can see the space remains behind.
</BODY>
</HTML>
)