JavaScript: Ansprechen von Elementen

Hallo.

Ich bastel gerade an einer JavaScript-Bibliothek für eine Homepage. In dieser Bibliothek soll es unter anderem Funktionen für eine dynamische Navigationsleiste geben. Aufgrund der Strukturierung der Seite haben wir beschlossen, die Navigationsleiste wie folgt zu strukturieren:

<dl>
  <dt>Sektion</dt>
  <dd>
    <ul>
      [*]Unterkapitel
      <ul>
        [*]Link
        [*]Link
        [*]Link
        [*]Link
        [*]Link
      [/list]

      [*]Unterkapitel
      <ul>
        [*]Link
        [*]Link
        [*]Link
        [*]Link
        [*]Link
      [/list]

    [/list]
  </dd>
  <dt>Sektion</dt>
  <dd>
    <ul>
      [*]Unterkapitel
      <ul>
        [*]Link
        [*]Link
        [*]Link
        [*]Link
        [*]Link
      [/list]

      [*]Unterkapitel
      <ul>
        [*]Link
        [*]Link
        [*]Link
        [*]Link
        [*]Link
      [/list]

    [/list]
  </dd>
</dl>

Okay. Folgende Gedanken stecken dahinter:

Das Ganze soll in einer Leiste am linken Rand des Bildschirms angezeigt werden. Die Inhalte der dt-Tags geben Sektionen an, die Inhalte der dd-Tags Untersektionen/-kapitel und die Links innerhalb der Liste die Verweise zu Unteruntersektionen/-Kapitel. D.h., die gesamte Homepage ist - vorerst - auf drei Ebenen aufgebaut:

1. Sektion 1
1. 1. Unterkapitel 1 von Sektion 1
1. 1. 1. Unterkapitel 1 von Unterkapitel 1 von Sektion 1
1. 1. 2. Unterkapitel 2 von Unterkapitel 1 von Sektion 1
1. 2. Unterkapitel 2 von Sektion 1
2. Sektion 2
2. 1. Unterkapitel 1 von Sektion 1
2. 1. 2. Unterkapitel 1 von Unterkapitel 1 von Sektion 1
usw.

Die Sektionen werden links angezeigt, wenn man auf den Titel einer Sektion klickt, sollen darunter die Untersektionen zum Vorschein kommen, wenn ich den Zeiger über den Link zu einem Unterkapitel fahre, kommen daneben die Links zu den Unteruntersektionen zum Vorschein. Zweiteres ist kein Problem, da es ein ganz normales, simples JS-CSS-hybrides DropDown-Menu ist. Der erste Teil bereitet mir Schwierigkeiten...

Mein Problem ist, dass ich die dd's nicht vernüftig ansprechen kann. Kann mir jemand hierbei helfen?

(Wenn meine Erklärungen nicht verständlich genug waren, kann ich gerne ein paar meiner Skizzen posten...)

MfG,
rincewind

definitions-liste:

dl - eröffnet die liste
dt - /dt - Definitionsterm
dd - /dd - Derfinitonsbeschreibung

so ist auch meine liste strukturiert

Ziel ist, das Ganze "unobtrusive" zu machen, dh mit einem Markup ohne zusätzliche eventhandler, ids oder divs und ähnliches...

<dl id="navi">
  <dt>klick me</dt>
  <dd>more stuff</dd>
  <dt>klick me</dt>
  <dd>more stuff</dd>
  <dt>klick me</dt>
  <dd>more stuff</dd>
  <dt>klick me</dt>
  <dd>more stuff</dd>
</dl>


<script type="text/javascript">
<!--
function prepareNav(sID){
  var nav=document.getElementById(sID);
  if(!nav)return;
  var child=nav.firstChild;
  while(child){
    if(child.nodeName=="DT"){
      child.onmousedown=function(){
        var sibling=this.nextSibling;
        while(sibling.nodeName!="DD")
          sibling=sibling.nextSibling;
        if(sibling.style.display=="block")
          sibling.style.display="none";
        else sibling.style.display="block";
      }
    }
    if(child.nodeName=="DD")child.style.display="none";
    if(child.nextSibling)child=child.nextSibling;
    else child=null;
  }  
}
prepareNav("navi");
//-->
</script>

der vorschlag von nem freund/bekannten von mir... =)