Foros del Web - como posicionar un menú desplegable?

lo que sucede es que yo pongo una capa dentro de otra y a travez de comportamientos haga que cuando el mouse este sobre el link visible se vea el menu desplegable, pero yo quiero que se vea ordenado bajo el link principal y no sobre el mismo link principal, aqui añado el codigo.

Código HTML:

<body>
 <div align="center">

  <table width="20%"  border="1">

    <tr>

      <td><div id="Layer1" style="position:relative; visibility:visible; width:100px; height:20px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"><a href="#" onClick="MM_showHideLayers('Layer2','','hide')" onMouseOut="MM_showHideLayers('Layer2','','show')">boton principal</a>

        <div id="Layer2" style="position:relative; visibility:hidden; width:100px; height:60px; z-index:2">

          <table width="100%"  border="0">

            <tr>

              <td><a href="#">link 1</a> </td>

            </tr>

            <tr>

              <td><a href="#">link 2 </a></td>

            </tr>

            <tr>

              <td><a href="#">link 3</a> </td>

            </tr>

          </table>

        </div> 

      </div></td>

    </tr>

  </table>
 </div>
 </body>