Could someone please look over this code and tell me whats wrong? When your mouse goes over the cells at the top, a layer should be created underneath that will have links. And also, if you can find something wrong, do you know what function I can use to hide a layer?
<script type = "text/javascript">
 function show1(){
 document.write("<div id = 'layer2'
 style = ' position:absolute; top:40; left:20; width:150; height:80; background-color:silver; z-index:10 ' >
 Option 1
 Option 2
 </div> ");

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="17">
    <td width="20%" onmouseover="show1()" height="17">Heading 1</td>
    <td width="20%" height="17">Heading 2</td>
    <td width="20%" height="17">Heading 3</td>
    <td width="20%" height="17">Heading 4</td>
    <td width="20%" height="17"></td>