ich möchte wenn ich mit der maus über die einzelnen Links der ersten Navigation gehe, sich die links in der unteren Navigation veraendern.
Das lässt sich nur mittels :hover bewerkstelligen. Dazu muss aber das Untermenü ein HTML-Nachfahre des betreffenden :hover-Elements sein, also nicht so (etwas gekürzt) …
<div id="primnav">
<ul>
<li class="first"><a href="" class="selected">HOME</a></li>
<li><a href="">NEWS</a></li>
</ul>
</div><div id="subnav1">
<ul>
<li><a href="">Philosophy</a></li> |
<li><a href="">Commitment</a></li> |
</ul>
</div><div id="subnav2">
<ul>
<li><a href="">Philosophy</a></li> |
<li><a href="">Commitment</a></li> |
</ul>
</div>
… sondern so:
<div id="primnav">
<ul>
<li class="first"><a href="" class="selected">HOME</a>
<ul id="subnavi1">
<li><a href="">Philosophy</a></li> |
<li><a href="">Commitment</a></li> |
</ul>
</li>
<li><a href="">NEWS</a>
<ul id="subnavi2">
<li><a href="">Philosophy</a></li> |
<li><a href="">Commitment</a></li> |
</ul>
</li>
</ul>
</div>
(Mal ganz zu schweigen davon, dass letztere, verschachtelte Struktur auch HTML-seitig die tatsächliche Menüstruktur widerspiegelt. In deinem Ansatz ist das nicht gegeben, dort besteht kein Zusammenhang zwischen einem Obermenüpunkt und seinen Untermenüs.)
Das Ein- und Ausblenden geschieht CSS-seitig folgendermaßen:
ul li ul {
display:none;
}
ul li:hover ul {
display:block;
}
Wenn ein Link angeklickt wird sollen natuerlich die Unterpunkte
auch in der zweiten Navigation stehen bleiben.
Das musst du dann in der jeweils aktiven HTML-Seite klären. Nicht möglich (jedenfalls ohne Javascript) ist es, dass du in derselben Seite im Obermenü klickst und daraufhin das dazugehördene Untermenü auf ewig stehen bleibt, auch nachdem die Maus den Obermenüpunkt verlassen hat. Dafür bietet CSS erstens keine Funktionalität und zweitens beißt sich das mit :hover, du hättest dann einmal eine Untermenüaktivierung mittels Drüberfahren und einmal mittels Klick. Sowas verwirrt den Besucher nur.