Crear un Sub Menú en CSS

[bathory84]

Que tal amigos, yo diseñé un Menú en CSS dentro de una Tabla, quisiera en el Botón "Productos" crear un Sub-Menú desplegable, ayudenme por favor, este es el Menú dentro del HTML:

Código HTML:

<table width="964" height="40" border="0" align="center" cellpadding="0" cellspacing="0" class="fondotabla">
  <tr>
 
    
    <th class="izquierda" scope="col">
    <a class="active" href="#">Principal</a></th>
    
    <th class="centro" scope="col">
    <a href="nosotros.html">Nosotros</a></th>
    
    <th class="centro" scope="col">
    <a href="servicios.html">Servicios</a></th>
    
    <th class="centro" scope="col">
    <a href="productos.html">Productos</a></th>
    
    <th class="centro" scope="col">
    <a href="testimonios.html">Testimonios</a></th>
    
    <th class="derecha" scope="col">
    <a href="contactos.html">Contactos</a></th>
    
    
  </tr>
</table>
 

Esta es la imagen de como luce el Menú actualmente:

[webosiris]

para hacer lo que quieres debes de usar html semántico.

- deja de usar tablas para diseñar y úsalas solo para lo que son, marcar datos tabulados
- un menú es una lista de items, por lo tanto usa UL y LI
- un submenu es una lista de items anidados de un item de la lista principal, ergo el html correcto es:

Código HTML:

<ul>
   <li><a href="#">Item 1</a></li>
   <li><a href="#">Item 2</a>
      <ul>
         <li><a href="#">SubItem 1</a></li>
         <li><a href="#">SubItem 2</a></li>
         <li><a href="#">SubItem 3</a></li>
      </ul>
   </li>
   <li><a href="#">Item 3</a></li>
</ul>
 

luego el css básico es sencillo, se resume en ocultar el UL anidado y mostrarlo cuando se hace hover sobre el LI padre

Código CSS:

ul li ul{display:none}
ul li:hover ul{display:block}
 

[valenti_92]

Lo que dice webosiris de la tablas es totalmente cierto, deberías dejar de usar tablas en tu código. Perjudica el SEO y la usabilidad de la web.
En este vídeo te muestro como personalizar un menú desplegable: [enlace moderado]
Espero que te sirva ;).

[webosiris]

Iniciado por valenti_92

En este vídeo te muestro como personalizar un menú desplegable: [enlace moderado]
Espero que te sirva ;).

lo que haces en tu video es una mala práctica, no es necesario javascript para hacer ese comportamiento, como muestra mi anterior mensaje solamente son necesarias 2 lineas de css.

[pzin]

Iniciado por webosiris

lo que haces en tu video es una mala práctica, no es necesario javascript para hacer ese comportamiento, como muestra mi anterior mensaje solamente son necesarias 2 lineas de css.

Alguna burrada más hay en el vídeo.