Submenus

Hola que tal estoy trantado de hacer un menu con submenus, con html y css, y bueno el probla que tengo es que al colocarlo donde quiero ponerlo en la web, al pasarle el raton para ver el submenu me desplaza la tabla. pongo el codigo

HTML

Código:

<table width="997" height="945">
  <tr>
    <td width="993" height="154" bgcolor="#0066FF">&nbsp;</td>
  </tr>
  <tr>
    <td height="62" bgcolor="#CCCC66">
    
<ul id="menu-horizontal">
<li><a href="#" title="Principal">Principal</a></li>
<li><a href="#" title="Servicios">Servicios</a>
<ul>
<li><a href="#" title="Restaurante">Restaurante</a></li>
<li><a href="#" title="Conciertos">Conciertos</a></li>
<li><a href="#" title="Salas de exposiciones">Salas de exposiciones</a></li>

</ul>
</li>
<li><a href="#" title="Localizacion">Localizacion</a>
</li></ul>
</td>
  </tr>
  <tr>
    <td height="719" bgcolor="#FFFF5F" valign="top"><p>&nbsp;</p>
      </td>
  </tr>
</table>

Codigo CSS

Código:

ul#menu-horizontal li {
float: left;
display: inline;
position: relative;}


ul#menu-horizontal ul {
display: none;
position: relative;
top: 24;
left:0;
margin:0;
padding:0;
background:#FFFFFF;
}

ul#menu-horizontal ul li {
display: block !important;
}

ul#menu-horizontal li:hover ul{
display: none;
}

ul#menu-horizontal li:hover ul{
display: block;
}

#menu-horizontal {
width:600px;
margin:0 auto;
}

#menu-horizontal li {
margin:0 1px;
width:98px;
min-height:19px;
text-align:center;
background:#BBB;
list-style:none;
padding:2px 0;
}