Hi
I have been having a problem with hiding a div when the mouse leaves it. This is my code:
Code:
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="17">
  <tr>
    <td width="20%" onmouseover="show(1)" height="17">Heading 1</td>
    <td width="20%" onmouseover="show(2)" height="17">Heading 2</td>
    <td width="20%" onmouseover="show(3)" height="17">Heading 3</td>
    <td width="20%" onmouseover="show(4)" height="17">Heading 4</td>
    <td width="20%" onmouseover="show(5)" height="17">Heading 5</td>
  </tr>
</table>
<div id = 'layer1' onmouseout='hide(1)' style = ' position:absolute; top:37; left:9; width:185; height:58; background-color:gold; z-index:10; visibility:hidden '> 
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
    <tr>
      <td width="13%" onclick="go()">&nbsp;</td>
      <td width="87%" onclick="go()">Option 1</td>
    </tr>
    <tr>
      <td width="13%">&nbsp;</td>
      <td width="87%">Option 2</td>
    </tr>
    <tr>
      <td width="13%">&nbsp;</td>
      <td width="87%">Option 3</td>
    </tr>
    </table>
</div>


<script type = "text/javascript">
<!--
function hide(id){
    var hello = "layer" + id;
    var name = document.getElementById(hello)
	name.style.visibility = "hidden";
	}
function show(id){
    var hello = "layer" + id;
    var name = document.getElementById(hello)
	name.style.visibility = "visible";
	}
function go(){
window.location = "option1.htm";
}
Note - I havent made a div for each heading yet as I am still trying to get one to work.

THE PROBLEM
The div disappears as soon as the mouse goes over a cell border line while still within the div...

What can I do???
Many thanks