Cambiando 2 cosas no se me ocurre arreglarlo, ya que con jquery (no con java como tu dices) todavia estoy empezando, pero sí que te puedo explicar la razón de que te pase eso.

Básicamente, la acción de mostrar/ocultar las subcategorias, se realiza cuando pinchas en el div que tiene por id clsContenedor, y claro, esto sucede no solo cuando pinchas en el titulo de la categoria, sino también cuando pinchas en su interior (las subcategorias).

Algo es algo. Un saludo

No entiedno NADA de esto pero en el código pone esto:

<li><a href="#">SQL</a></li>

En "#" me parece que dice que no direcciona a otra web, en vez de "#" tendría que ir la ruta de la web a direccionar.

Alomejor lo que cabao de decir es una tontería pero solo pretendo ayudar  

Saludos

no te entiendo, el menu tiene # para que no direccione a otra parte, solo pon el code en tu web y en vez de # colocas un link como http://foro.elhacker.net y debería funcionar, no hay que saber ni jquery para darse cuenta, ahora si con lo que te dije sigue pasando ya escapa de mis manos pués yo no se jquery...saludos

.

El problema consiste en que en el menú cuando haces clic en cualquier enlace se cierra la categoría dentro de la cual esta el enlace, ejemplo:

En el menú por defecto la categoría Sistemas Operativos esta desplegada, cuando pinchas en cualquier enlace por ejemplo Linux se cierra el categoria Sistemas operativos y eso es algo incomodo y pasa por esto:



El problema es que no sabemos como arreglarlo.

Gracias.

Hola, la verdad es que me rompí la cabeza hasta que me di cuenta del fallo tonto este  
Esta mal hecho porque actúa ante un click general en el div en el que se aloja, en vez de en un área concreto.

Te dejo el JS con la solución y la lineas corregidas para que lo veas.

$(document).ready(function(){
	/*expandir todos los bloques con la clase clsActivo y agregar la clase clsArriba a los
	titulos de cada uno de esos bloques*/
	$('.clsActivo').stop(true,true).slideToggle().parent().find('.clsSeccion').addClass('clsArriba');
	/*buscamos el ultimo li, del ultimo ul y le agregamos la clase clsUltimo para redondear el
	borde inferior*/
	$('.clsContenedor').last('ul').find('li:last-child').addClass('clsUltimo');
	/*agregamos la clase clsAbajo a todos los elementos del acordeon, que inicialmente
	se muestren cerrados (sin la clase clsActivo)*/
	$(".clsContenedor .clsSeccion ").not('[class$="clsArriba"]').addClass('clsAbajo');
 
	/*evento que se dispara al hacer clic en cualquiera de los contenedores del acordeon*/
	$('.clsContenedor span').click(function(){		/*mostramos u ocultamos la lista (ul) utilizando slideToggle*/
		$(this).next().find('ul').stop(true,false).slideToggle('fast',function(){			//verificar la clase que tiene el titulo del contenedor
			if($(this).parent().find('.clsSeccion').hasClass('clsAbajo')){
				//eliminamos la clase clsAbajo y agregamos la clase clsArriba (para los iconos)
				$(this).parent().find('.clsSeccion').removeClass('clsAbajo').addClass('clsArriba');
			}else{
				//eliminamos la clase clsArriba y agregamos la clase clsAbajo (para los iconos)
				$(this).parent().find('.clsSeccion').removeClass('clsArriba').addClass('clsAbajo');
			}
		});
	});
 
});
 

En vez de esperar a un click general del la clase .clsContenedor, este esperara a una click de un span que se aloje en un elemento que tenga esa clase. Así no actúa sobre todo el div, sino solo sobre el titulo.

La linea 15 he añadido el next(), para que seleccione el siguiente y así no se confunda consigo mismo xD.

También, te recomiendo que le añadas al CSS una linea con el siguiente contenido.

.clsContenedor ul li a {outline:none !important;}

La razón es, que al no cerrarse (que es lo que queremos), deja el focus sobre el link y queda un tanto feo.

Espero que te haya ayudado.

EDIT: Ahora si que me tengo que romper la cabeza por no leer a fondo el comentario de @lipman 

Saludos

He modificado el JS Y he añadido la linea a CSS y no me funciona, no hace nada cuando le doy a clic.
Creo que no acepta en la linea 15  el "clsContenedor span".