Navigation, Subnavigation, Anpassung

Hallo Leute,

meine Frage bezieht sich auf folgendes Problem.
Ich möchte, das meine Navigation folgende 2 Punkte berücksichtigt bzw. vollzieht.

1. Jeder Navigationspunkt besteht aus jeweils 2 Images die folgendermaßen in meiner css-file stehen. Für Hauptnavigation:

#nav01 a {background: url(images/navi/home_off.gif) top left no-repeat; width: 63px; height: 18px;}
#nav01 a:hover {background: url(images/navi/home_on.gif) top left no-repeat;}
#nav01 a.on, a:hover.on {background: url(images/navi/home_on.gif) top left no-repeat; width: 63px; height: 18px;}

Dies wäre z.b der CSS-Code für das Image der Startseite.

Wenn ich jedoch nun möchte, das er bei einem "aktiven" Feld, also wenn ich z.b auf der Startseite bin, das Image von nav01 in nav01on wechselt und die Restlichen Navigationspunkte gleich bleiben, geschieht dies nicht, bzw. ich hab schon alles probiert aber ich bekomme es nicht hin.

<ul> 
      <li id="nav01"><a href="<?php bloginfo('home'); ?>"><span>Home</span></a></li>
      <li id="nav02"><a href="<?php bloginfo('url'); ?>/about"><span>About</span></a></li> 
      <li id="nav03"><a href="<?php bloginfo('url'); ?>/multimedia"><span>Multimedia</span></a></li> 
      <li id="nav04"><a href="<?php bloginfo('url'); ?>/forum"><span>Forum</span></a></li> 
      <li id="nav05"><a href="<?php bloginfo('url'); ?>/kontakt"><span>Kontakt</span></a></li> 
      <li id="nav06"><a href="<?php bloginfo('url'); ?>/impressum"><span>Impressum</span></a></li> 
</ul>

2. Jeder Sub-Navigationspunkt besteht aus jeweils 2 Images die folgendermaßen in meiner css-file stehen. Für Sub-Navigation:

#subnav01 a {background: url(images/subnavi/sub1_off.gif) top left no-repeat; width: 64px; height: 11px;}
#subnav01 a:hover {background: url(images/subnavi/sub1_on.gif) top left no-repeat;}
#subnav01 a.on, a:hover.on {background: url(images/subnavi/sub1_on.gif) top left no-repeat; width: 64px; height: 11px;}

Hier wieder das gleiche Prinzip, wechseln wenn aktiv der rest bleibt gleich, bis es aktiviert wird.

<ul>                        
        <li id="subnav01"><a href="<?php bloginfo('url'); ?>/about/me"><span>About Me</span></a></li>
        <li id="subnav02"><a href="<?php bloginfo('url'); ?>/about/you"><span>About You</span></a></li>
        <li id="subnav03"><a href="<?php bloginfo('url'); ?>/about/us"><span>About Us</span></a></li>
        <li id="subnav04"><a href="<?php bloginfo('url'); ?>/about/about"><span>About About</span></a></li>                                
</ul>

3. Desweiteren soll die Sub-Navigation nur dann angezeigt werden, wenn der Navigationspunkt ABOUT ausgewählt worden ist.

Ich habe schon verschiedene Plugins probiert, auch einige Tut´s gelesen, die in die Richtung gehen, das Problem ist jedoch jedesmal, das mit den id´s für 2 Image´s und das die Subnavi einfach immer angezeigt wird bei den Pages und nicht bei einer bestimmten wo ich möchte. Auch habe ich mithilfe der Tags etc, keine Lösung gefunden. Meine Navi+Subnavi befindet sich in der header.php

Schonmal großen dank für euere Hilfe. LG VolkanZ

Guten morgen liebe Gemeinde. Hat eventuell jemand eine Idee wie ich mein oben geschildertes Problem lösen kann? bzw. hab ich irgendetwas nicht erwähnt, was bei meiner Problemlösung behilflich sein könnte?

Würde mich sehr über rege Teilnahme und Lösungsvorschläge freuen!
Noch einen schönen Sonntag wünsche ich, vielen Dank.

Liebe Grüße, VolkanZ