Test Foro de elhacker.net SMF 2.1

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

<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

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;
}