Navigation mit 3 Ebenen formatieren

Guten Abend zusammen,

ich möchte meine Navigation, bestehend aus 3 Ebenen formatieren. Die Navigation sieht folgendermaßen aus:

[COLOR=red]Hauptpunkt 1[/COLOR]
[COLOR=seagreen]- Unterpunkt 1.1[/COLOR]
[COLOR=seagreen]- Unterpunkt 1.2[/COLOR]
[COLOR=royalblue]-- Unterpunkt 1.2.1[/COLOR]
[COLOR=royalblue]-- Unterpunkt 1.2.2[/COLOR]
[COLOR=red]Hauptpunkt 2[/COLOR]
[COLOR=red]Hauptpunkt 3[/COLOR]
[COLOR=red]Hauptpunkt 4[/COLOR]

Mein Problem jetzt: Ich möchte die jeweiligen Unterpunkte durch einrücken von einerander trennen. Es soll so wie beim Beispiel oben aussehen.

Perfekt wäre noch, wenn die jeweiligen Unterpunkte verschiedene Linkfarben hätten. Z.b. die Hauptpunkte "rot", der "Unterpunkt 1.1" z.b. "grün" und "Unterpunkt 1.2.1" in blau...

Kann mir hier jemand weiterhelfen? Ich weiß echt nicht, wie ich die CSS aufbauen soll um dieses Ergebnis zu bekommen...

Vielen vielen Dank!