Problem z menu js Opcje

[Wasiquard]

Problem ze strony testowej LO:
http://lo.tp.boo.pl/
Menu - gdy klikam w menu na dział "Dyrekcja", "Absolwenci" i "Dla uczniów" powinno się rozsunąć i pokazać inne pozycje. No i pokazuje, ale... nie swoje. Przyznam się, że js w ogóle nie znam, ale znam php i pomogło mi to w podrasowaniu scriptu, który znalazłem w programie AAScripter. Domyślnie script działał dobrze, ale powtarzały się identyfikatory, co jest niezgodne z xhtml (i chyba ogólnie z html'em). Jak zrobić by działało to dobrze? Może ma ktoś kod innego, podobnego menu.

JS:

Kod

function change(){
  var nr = "0";
  if(!document.all)
    return
  do {
    nr++
  } while(event.srcElement.id=="header_" + nr){
    var nested = document.getElementById("header_" + nr + "_")
    if (nested.style.display=="none") {
      nested.style.display=''
    } else {
      nested.style.display="none"
    }
  }
}

document.onclick = change

HTML:

[HTML] pobierz, plaintext 
<div id="menu">
<ul>
  <li class="top">Serwis</li>
    <li><a href="#" class="on"><span>Aktualności</span></a></li>
    <li><a href="#"><span>Historia</span></a></li>
    <li><a href="javascript:void(null)"><span id="header_1">Dyrekcja</span></a></li>
    <ul id="header_1_" style="display: none;">
      <li><a href="#"><span>Nauczyciele</span></a></li>
      <li><a href="#"><span>Dyrekcja</span></a></li>
      <li><a href="#"><span>Samorząd</span></a></li>
      <li><a href="#"><span>Rada Rodziców</span></a></li>
    </ul>
    <li><a href="javascript:void(null)"><span id="header_2">Absolwenci</span></a></li>
    <ul id="header_2_" style="display: none;">
      <li><a href="#"><span>Zjazd absolwentów</span></a></li>
      <li><a href="#"><span>Stowarzyszenie absolwentów</span></a></li>
      <li><a href="#"><span>Księga absolwentów</span></a></li>
      <li><a href="#"><span>Lista absolwentów</span></a></li>
    </ul>
    <li><a href="#"><span>Galeria zdjęć</span></a></li>
    <li><a href="javascript:void(null)"><span id="header_3">Dla uczniów</span></a></li>
    <ul id="header_3_" style="display: none;">
      <li><a href="#"><span>Zajęcia dodatkowe</span></a></li>
      <li><a href="#"><span>Zastępwstwa</span></a></li>
      <li><a href="#"><span>Pobieranie</span></a></li>
      <li><a href="#"><span>Bramka e-mail</span></a></li>
    </ul>
    <li><a href="#"><span>Mapa serwisu</span></a></li>
  <li class="top">Statystyki</li>
    <li class="empty"><b>Odwiedzin:</b> 32432</li>
    <li class="empty"><b>On-line:</b> 4</li>
    <li class="empty" id="clock"></li>
</ul>
</div>
[HTML] pobierz, plaintext 

[revyag]

Od razu widać, że kod jest IE only
A można to zrobić prościej.

Kod

function change(item){
    if(document.getElementById(item.id+"_").style.display=="none") {
        document.getElementById(item.id+"_").style.display=""
    } else {
        document.getElementById(item.id+"_").style.display="none"
    }
}

[HTML] pobierz, plaintext 
<div id="menu">
<ul>
<li class="top">Serwis</li>
<li><a href="#" class="on"><span>Aktualności</span></a></li>
<li><a href="#"><span>Historia</span></a></li>
<li><a href="javascript:void(null)"><span id="header_1" onclick="change(this)">Dyrekcja</span></a></li>
<ul id="header_1_" style="display: none;">
<li><a href="#"><span>Nauczyciele</span></a></li>
<li><a href="#"><span>Dyrekcja</span></a></li>
<li><a href="#"><span>Samorząd</span></a></li>
<li><a href="#"><span>Rada Rodziców</span></a></li>
</ul>
<li><a href="javascript:void(null)"><span id="header_2" onclick="change(this)">Absolwenci</span></a></li>
<ul id="header_2_" style="display: none;">
<li><a href="#"><span>Zjazd absolwentów</span></a></li>
<li><a href="#"><span>Stowarzyszenie absolwentów</span></a></li>
<li><a href="#"><span>Księga absolwentów</span></a></li>
<li><a href="#"><span>Lista absolwentów</span></a></li>
</ul>
<li><a href="#"><span>Galeria zdjęć</span></a></li>
<li><a href="javascript:void(null)"><span id="header_3" onclick="change(this)">Dla uczniów</span></a></li>
<ul id="header_3_" style="display: none;">
<li><a href="#"><span>Zajęcia dodatkowe</span></a></li>
<li><a href="#"><span>Zastępwstwa</span></a></li>
<li><a href="#"><span>Pobieranie</span></a></li>
<li><a href="#"><span>Bramka e-mail</span></a></li>
</ul>
<li><a href="#"><span>Mapa serwisu</span></a></li>
<li class="top">Statystyki</li>
<li class="empty"><b>Odwiedzin:</b> 32432</li>
<li class="empty"><b>On-line:</b> 4</li>
<li class="empty" id="clock"></li>
</ul>
[HTML] pobierz, plaintext