Test Foro de elhacker.net SMF 2.1

Programación => Desarrollo Web => Mensaje iniciado por: aldg en 20 Marzo 2011, 23:30 PM

Título: Submenus
Publicado por: aldg en 20 Marzo 2011, 23:30 PM
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;
}