Hola satya, bienvenida a los foros.
Si te fijas en el codigo de esa pagina el tema se resuelve en base a codigo JavaScript. Cada uno de los elementos (facultades y programas) deberá tener un "ID" unico. Imagino, que como lo tienes en base d edatos tienes la relacion de cuales programas pertenecen a que escuela, por ende no es dificil hacer una lista de los programas que se deben destacar cuando pasa el mouse sobre una facultada, cierto?
Bueno, el punto es que en las facultades deberas manejar los eventos
onMouseOver y
onMouseOut para marcar y desmarcar los programas asociados.
Te adjunto un ejemplo que hace lo que deseas, claro, asumo que sabes crear desde PHP los arreglos (facultades y programas) para que queden definidos en JavaScript. (de todas formas es sumamente sencillo, crea, pr ejemplo un string en donde vas armando el texto y luego solo lo agregas en donde corresponde)
Como veras en este código he creado un arreglo de facultades en donde cada elemento es el codigo de la facultad, por ende debe ser unico.
El segundo arreglo, es un arreglo de arreglos, en donde cada elemento corresponde a una facultad y es un arreglo de todos los programas de la facultad ( el prmer elemento de programas es un arreglo con todos los programas de la primera facultad, etc.)
Si te fijas, en cada link (facultad o programa) en el HTML se ha indicado como ID el codigo que corresponde y que esta en los arreglos, de esa manera, la funcion
doResaltar puede localizar aquellos elementos que debe destacar.
Se entendio algo? espero que si... bueno de todas maneras ahi te va...
<html>
<head>
<meta name="author" content="CAraya">
<style type="text/css">
a { color: #0000FF;
text-decoration: none;}
</style>
<script type="text/javascript">
var facultades = new Array("01","02","03");
var programas = new Array(new Array("p1","p2","p3","p4"),new Array("p5","p6"),new Array("p7"));
var colorDestaca = "#FF0000";
var colorNormal = "#0000FF";
function doResaltar(id,resaltar){
if (resaltar){
cResaltado = colorDestaca;}
else{ cResaltado = colorNormal;}
document.getElementById(id).style.color = cResaltado;
for (var i=0; i<facultades.length;i++){
if (facultades[i]==id) {
for (var j= 0;j<programas[i].length;j++){
document.getElementById(programas[i][j]).style.color = cResaltado;
}
break;
}
}
}
</script>
</head>
<body>
<a href="#" id="01" onMouseover="doResaltar(this.id,true);" onmouseout="doResaltar(this.id,false);">Facultad de Ingenieria</a><br>
<a href="#" id="02" onMouseover="doResaltar(this.id,true);" onmouseout="doResaltar(this.id,false);">Facultad de Derecho</a><br>
<a href="#" id="03" onMouseover="doResaltar(this.id,true);" onmouseout="doResaltar(this.id,false);">Facultad de Medicina</a><br>
<br>
<a href="#" id="p1" >Programa ingenieria 1</a><br>
<a href="#" id="p2" >Programa ingenieria 2</a><br>
<a href="#" id="p3" >Programa ingenieria 3</a><br>
<a href="#" id="p4" >Programa ingenieria 4</a><br>
<a href="#" id="p5" >Programa Derecho 1</a><br>
<a href="#" id="p6" >Programa Derecho 2</a><br>
<a href="#" id="p7" >Programa medicina 1</a><br>
</body>
</html>
eso, espero que te sirva como guía.
Saludos.