8 identische CSS DropDown-Menüs und nur eines funktioniert richtig.

Hallo, ich bin CSS Anfänger und habe mir durch mühsame Web-Inspiration ein Dropdown-Menü zusammengebaut.

Das Menü habe ich auf der Webseite 8x platziert, aber nur das erste funktioniert so wie es sollte.(Beim Aufklappen eines 2ten Menüs, sollte das offene Menü wieder schliessen. Wahrscheinlich eine Kleinigkeit, aber ich kann den Fehler nicht finden.)

Ein Tip habe ich bereits bekommen, das die Menüs unterschiedliche IDs brauchen.
(Jedes Menü seine eigene ID) Bei HTML und CSS krieg ich das noch hin. Bei JS bin ich aber total überfordert. Kann mir da jemand helfen.

Die Webseite kann man unter folgenden Link einsehen.
ADRESSE: Web-Start

Für jede Hilfe bin ich sehr dankbar.

Danke, ja, aber das ist nicht das Problem. Ich habe die IDs auf HTML und CSS angepasst.

Von JS habe ich aber keine Ahnung. Auf der Webseite gibt es 8 Dropdown Menüs mit der ID cssmenu (1-8
Mit der Datei script2.js ist aber nur das erste Dropdown Menü aktiviert.
Welche Änderungen muss ich jetzt noch auf dem Script vornehmen, damit alle Menüs aktiv werden?
Kann mir da wer helfen?

http://www.muffart.com/webstart2.html

script2.js

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
} )( jQuery );