Probablemente muchos saben como crear un menu desplegable con submenus, no se si han puesto sus codigos. Sin embargo yo pongo el mio que esta exageradamente sencillo, si a caso lo mas complicado es la anidacion de capas y la posicion de cada una para que se vean correctamente.
Código HTML:
<html>
<head>
<title>Untitled</title>
<script>
var contador;
function ver(ide,visible,submenu) {
obj = document.getElementById(ide);
if(visible)
obj.style.display = 'block';
else
obj.style.display ='none';
}
</script>
</head>
<body>
<!--Menu principal-->
<div id="menup">
<table>
<tr><td class="mpc"><a href="#" onMouseOut="ver('spc',false); return false" onMouseOver="ver('spc',true); return false" >Partes PC</a></td>
<td class="mjuegos"><a href="#" onMouseOut="ver('sjuegos',false,false); return false" onMouseOver="ver('sjuegos',true,true); return false">Juegos</a></td>
<td class="mprogramas"><a href="#" onMouseOut="ver('sprogramas',false,false); return false" onMouseOver="ver('sprogramas',true,true); return false">Programas</a></td></tr>
</table>
<!--SubMenu PC-->
<div id="spc" onMouseOut="ver('spc',false); return false" onMouseOver="ver('spc',true); return false" style="display:none;position:absolute; top:30px;">
<table border="2px">
<tr><td onMouseOut="ver('ssmemorias',false); return false" onMouseOver="ver('ssmemorias',true); return false"><a href="#">Memorias</a></div></td></tr>
<tr><td onMouseOut="ver('sshd',false); return false" onMouseOver="ver('sshd',true); return false"><a href="#">HD</a></td></tr>
</table>
<!--SubMenu Memorias de SubMenu PC-->
<div id="ssmemorias" onMouseOut="ver('ssmemorias',false); return false" onMouseOver="ver('ssmemorias',true); return false" style="display:none;position:absolute; left:70px; top:5px;">
<table>
<tr><td><a href="#">DDR1</a></td></tr>
<tr><td><a href="#">DDR2</a></td></tr>
</table>
</div>
<!--SubMenu HD de SubMenu PC-->
<div id="sshd" onMouseOut="ver('sshd',false); return false" onMouseOver="ver('sshd',true); return false" style="display:none;position:absolute; left:70px; top:30px;">
<table>
<tr><td><a href="#">IDE</a></td></tr>
<tr><td><a href="#">SATA</a></td></tr>
</table>
</div>
</div>
<!--SubMenu Juegos-->
<div id="sjuegos" onMouseOut="ver('sjuegos',false); return false" onMouseOver="ver('sjuegos',true); return false" style="display:none;position:absolute; left:75px; top:30px;">
<table>
<tr><td onMouseOut="ver('ssaccion',false); return false" onMouseOver="ver('ssaccion',true); return false"><a href="#">Accion</a></td></tr>
<tr><td onMouseOut="ver('ssaccion',false); return false" onMouseOver="ver('ssaccion',true); return false"><a href="#">Aventura</a></td></tr>
</table>
<!--SubMenu Accion de SubMenu Juegos-->
<div id="ssaccion" onMouseOut="ver('ssaccion',false); return false" onMouseOver="ver('ssaccion',true); return false" style="display:none;position:absolute; left:55px; top:0px;">
<table>
<tr><td><a href="#">Accion</a></td></tr>
<tr><td><a href="#">Aventura</a></td></tr>
</table>
</div>
</div>
<!--SubMenu Programas-->
<div id="sprogramas" onMouseOut="ver('sprogramas',false); return false" onMouseOver="ver('sprogramas',true); return false" style="display:none;position:absolute; left:120px; top:30px;">
<table>
<tr><td onMouseOut="ver('antivirus',false); return false" onMouseOver="ver('antivirus',true); return false"><a href="#">Antivirus</a></td></tr>
<tr><td onMouseOut="ver('diseno',false); return false" onMouseOver="ver('diseno',true); return false"><a href="#">Diseno</a></td></tr>
</table>
<!--SubMenu Antivirus de SubMenu Programas-->
<div id="antivirus" onMouseOut="ver('antivirus',false); return false" onMouseOver="ver('antivirus',true); return false" style="display:none;position:absolute; left:55px; top:0px;">
<table>
<tr><td><a href="#">Norton</a></td></tr>
<tr><td><a href="#">Nod32</a></td></tr>
<tr><td><a href="#">Avira</a></td></tr>
</table>
</div>
<!--SubMenu Diseno de SubMenu Programas-->
<div id="diseno" onMouseOut="ver('diseno',false); return false" onMouseOver="ver('diseno',true); return false" style="display:none;position:absolute; left:55px; top:0px;">
<table>
<tr><td><a href="#">Photoshop</a></td></tr>
<tr><td><a href="#">PaintShop Pro</a></td></tr>
</table>
</div>
</div>
</div>
</body>
</html> Pueden agregar mas sub menus (claro si entienden la anidacion de las capas) aunque creo que son 2 sub menus seria mas que suficiente si hay muchas secciones en su pagina, yo por el momento no lo voy a utilizar por que mi pagina apenas empieza y no requiere de un menú de estos.
Debo decir que el menu esta muy sencillo aunque si puede llegar a confundir, igual y hay mejores scripts para hacer lo mismo pero por el momento esto me funciona y ojala a quien no tenga ni idea de como crear uno le sirva. Tambien le falta diseño, yo solo organice los menus y submenus en tablas separadas pero podrian estas en cada celda tener un fondo o una imagen que simule un boton (en vez de utilizar enlaces de texto) pero eso ya es otro asunto.