jquery Navigation

[DjMalcolm]

Hallo zusammen,
ich hätte da ein Problem und zwar versuche ich momentan eine Navigation mit jquery zu erstellen. Ich bin ziemlicher Neuling was Javascript angeht. Mein Script funktioniert soweit, dass der jeweils erste unterpunkt aus der Navigation angezeigt wird. Ich möchte allerdings, dass alle Unterpunkte jeweils angezeigt werden.
Es wäre wirklich klasse, wenn jemand mein Script anschauen und mir verraten kann, wie ich das hinbekommen kann.

Edit:
So bin schon ein wenig weiter. Ich poste mal meinen aktuellen Code:
HTML:

'<div class="nav">'.
'<ul id="Navigation">'.
    '<li><a href="#">&Uuml;ber Mich</a></li>'.
    '<li class="expand"><a href="#">Bilder</a>'.
        '<ul >'.
        '<li class="expand"><a href="#">Menschen</a>'.
            '<ul>'.
            '<li><a href="#">Menschen Allgemein</a></li>'.
            '<li><a href="#">Hochzeit</a></li>'.
            '<li><a href="#">Demonstrationen</a></li>'.
            '</ul>'.
        '</li>'.
        '<li class="expand"><a href="#">Natur</a>'.
            '<ul>'.
            '<li><a href="#">Landschaft</a></li>'.
            '<li><a href="#">Himmel</a></li>'.
            '<li><a href="#">Pflanzen</a></li>'.
            '</ul>'.
        '</li>'.
        '<li class="expand"><a href="#">Tiere</a>'.
            '<ul>'.
            '<li><a href="#">Hunde</a></li>'.
            '<li><a href="#">Katzen</a></li>'.
            '<li><a href="#">Insekten</a></li>'.
            '<li><a href="#">Wasserv&ouml;gel</a></li>'.
            '<li><a href="#">Landv&ouml;gel</a></li>'.
            '<li><a href="#">Wildtiere</a></li>'.
            '</ul>'.
        '</li>'.
        '<li class="expand"><a href="#">St&auml;dte</a>'.
            '<ul>'.
            '<li><a href="#">Allgemein</a></li>'.
            '<li><a href="#">Geb&auml;de</a></li>'.
            '<li><a href="#">Kirchen</a></li>'.
            '<li><a href="#">Sehensw&uuml;rdigkeiten</a></li>'.
            '</ul>'.
        '</li>'.
        '</ul>'.
    '</li>'.
    '<li><a href="#">Impressum</a></li>'.
'</ul>'.

	'</div>'.
'</div>';
	}

CSS:

.nav a 
{
display:block;
margin:5px;
width:150px;
padding:5.5px;
background-image : url("include/pic/divbg.png");
}

.nav ul
{
padding: 0; 
list-style-type:none;
list-style-position:inside;
}

Und hier mein aktuelles Javascript:

<script type="text/javascript">
$(document).ready(function() {
   $(".expand").click(function(e) {
      $(this).toggleClass("expanded");
      $(this).children("ul:first").slideToggle("300");
      e.stopPropagation();


    $(function() {
        $('#bilder a').lightBox();
    });
       });  
}); //$(document).ready
    </script>

So wie ich es aktuell habe, schließt sich beim klick auf Bilder die kompletten Untermenus von Bilder. Da das Javascript ja alle expant klassen anspricht, gibt es eine einfache Möglichkeit, dass ich die Untermenus wirklich nacheinander öffnen und schließen kann?
Also wenn ich auf Bilder klicke, dass sich dann nur die Oberkategorien. Beim Klick auf die Oberkategorien dann die jeweiligen Unterkategorien öffnen? Bei meinem momentanen Wissenstand würde ich den Unterkategorien jeweils neue Klassen hinzufügen, die ich dann getrennt im Javascript ansprechen kann. Geht das auch einfacher, als für jede Ober und Unterkategorie neu?

Zweites Problem was ich habe, wäre dass die komplette Navigation bei Seitenaufruf angezeigt wird, wie kann ich dem Script jetzt sagen, dass es zu anfang nur die Hauptkategorien also nur Bilder anzeigen soll und "Menschen""Tiere" usw. erst beim Klick auf

Und einmal eine Entschuldigung mein Ursprungspost sah doch ziemlich... naja nach betteln aus. War so nicht meine Absicht ich möchte schon lernen und wäre auch um kleinere Hilfestellungen dankbar.