Bueno, aquí dejo una primera solución. Voy a intentar escribirlo todo desde Javascript a partir de la información contenida en un vector pero más adelante y con más calma.
Código:
<html>
<head>
<script language="JavaScript">
function despliega(n){
for(i=1;i<=3;i++){
obj=document.getElementById(i);
if(n==i){if(obj){document.getElementById(i).style.display=''}}
else{if(obj){document.getElementById(i).style.display='none'}}
}
}
</script>
</head>
<body><basefont face="Arial">
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#0066FF">
<td colspan="2" onClick="despliega(1)" style="cursor:pointer;"><font color="#FFFFFF"><strong>Inicio</strong></font></td>
</tr>
<tr bgcolor="#0066FF">
<td colspan="2" onClick="despliega(2)" style="cursor:pointer;"><font color="#FFFFFF"><strong>Novedades</strong></font></td>
</tr>
<tr id="2" style="display:none;"><td>
<table width="100%">
<td width="29"></td>
<td width="121" bgcolor="#00CCFF"><strong><font color="#666666"><em>Proyectos</em></font></strong></td>
</tr>
<tr>
<td></td>
<td bgcolor="#00CCFF"><strong><font color="#666666"><em>Becas</em></font></strong></td>
</table>
</td></tr>
<tr bgcolor="#0066FF">
<td colspan="2" onClick="despliega(3)" style="cursor:pointer;"><font color="#FFFFFF"><strong>Personal</strong></font></td>
</tr>
<tr id="3" style="display:none;"><td>
<table width="100%"><tr>
<td width="29"></td>
<td bgcolor="#00CCFF"><font color="#666666"><strong><em>Profesores</em></strong></font></td>
</tr></table>
</td></tr>
</table>
</body>
</html>
Un saludo.