Código:
<HTML>
<HEAD>
<TITLE> </TITLE>
<script language="javascript">
function despliega(id){
var action = (document.getElementById('submenu'+id).style.display=='none')?true:false;
if (action){
document.getElementById('submenu'+id).style.display = 'block';
}else{
document.getElementById('submenu'+id).style.display = 'none';
}
}
</script>
</HEAD>
<BODY>
<table width="126" height="445" cellpadding="0" cellspacing="0" id="menu">
<tr>
<td width="126" height="322" valign="top">
<div id="title0" class="title" valign="top" style="height:15px;">
<table border="0" style="background-color:red;" cellpadding="0" cellspacing="0" width="126" height="15">
<tr><td><a href="#"><img src="imagen" name="pic1" hspace="0" vspace="0" border="0" onMouseOver="this.src = 'img/inicio_over.gif';" onMouseOut="this.src = 'img/inicio.gif';" style="cursor:pointer;height:15px;" alt="Inicio"></a></td></tr>
</table>
</div>
<div id="title1" class="title" valign="top" style="height:15px;">
<table border="0" style="background-color:red;" cellpadding="0" cellspacing="0" width="126" height="15">
<tr><td><a href="compania.shtm"><img src="img/compania.gif" name="pic1" hspace="0" vspace="0" border="0" onMouseOver="this.src = 'img/compania_over.gif';" onMouseOut="this.src = 'img/compania.gif';" style="cursor:pointer;height:15px;" alt="Compañia"></a></td></tr>
</table>
</div>
<div id="title2" class="title" valign="top" style="height:15px;">
<table border="0" cellpadding="0" cellspacing="0" width="126" height="15">
<tr><td><a href=""><img src="img/infra.gif" name="imagen2" hspace="0" vspace="0" border="0" onMouseOver="this.src = 'img/infra_over.gif';" onMouseOut="this.src = 'img/infra.gif';" style="cursor:pointer" alt="Infraestructuras" onClick="despliega(2);return false;"></a></td></tr>
</table>
</div>
<div id="submenu2" class="submenu" style="padding:0;display:none;">
<table border="0" cellpadding="0" cellspacing="0" width="124">
<tr>
<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="cableado.shtm">Cableado Estructurado</a></td>
</tr>
<tr>
<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="proyectos.shtm">Proyectos Especiales</a></td>
</tr>
</table>
</div>
<div id="title3" class="title"><table border="0" cellpadding="0" cellspacing="0" width="126"><tr><td><img src="img/redes.gif" name="pic2" hspace="0" vspace="0" border="0" onMouseOver="this.src = 'img/redes_over.gif';" onMouseOut="this.src = 'img/redes.gif';" style="cursor:pointer" alt="Redes" onClick="despliega(3);return false;"></td></tr></table></div>
<div id="submenu3" class="submenu" style="valign:top;padding:0;display:none;">
<table border="0" cellpadding="0" cellspacing="0" width="124">
<tr>
<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="redes.shtm"><b>Redes</b></a></td>
</tr>
<tr>
<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="seguridad.shtm">Seguridad</a></td>
</tr>
<tr>
<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="convergencia.shtm">Convergencia</a></td>
</tr>
<tr>
<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="conectividad.shtm">Conectividad</a></td>
</tr>
<tr>
<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="disponibilidad.shtm">Disponibilidad</a></td>
</tr>
<tr>
<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="movilidad.shtm">Movilidad</a></td>
</tr>
</table>
</div>
<div id="title4" class="title">
<table border="0" cellpadding="0" cellspacing="0" width="126">
<tr>
<td><a href="contacto.shtm"><img src="img/contacto.gif" name="pic3" hspace="0" vspace="0" border="0" onMouseOver="this.src = 'img/contacto_over.gif';" onMouseOut="this.src = 'img/contacto.gif';" style="cursor:pointer" alt="Contacto"></a></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</BODY>
</HTML>
En este codigo esta lo que yo digo, existe dentro de una tabla una serie de capas de menu, las id="submenu" son las que no se ven mientras no se pulse sobre su opcion menu padre, que es cuando por medio del script despliega se comprueba el estado de la capa del submenu correspondiente y se despliega o pliega segun corresponda.
A ver si esto te puede ayudar, es muy simple, de verdad, cuanquier cosa, me comentas