Verschachtelte CSS

[Lars Arendt]

Hallo,

ich sitze nun schon seit etlichen Stunden vor einem kleinen Problem und habe bisher noch keine Lösung gefunden. Vielleicht ist hier jemand der sich schon mit ähnlichem beschäftigt hat.

Es geht dabei um die Realisierung einer Navigation wo ja nach MouseOver, MouseOut oder onClick verschiedene Klassen ausgetausch werden. Da die Navigations aus Textlinks besteht, sollte je nach Status auch ein anderes Erscheinungsbild für die Pseudoformate :link etc. verwendet werden. Dies habe ich über verschachtelte CSS realisiert. Bis hier klappt alles wunderbar.

Je nach Menüpunkt soll nun ein Untermenü eingeblendet werden. Damit das alles übersichtlich bleibt wird eine transparente Grafik in der Höhe verändert sodass Platz für das Untermenü entsteht. Wenn ein Untermenü schon offen ist, muss dieses natürlich erst geschlossen werden. UNd genau dabei entsteht das Problem.

Wenn ein Untermenü über einem auszuwählenden Menüpunkt geöffnet war, springt der Menüpunkt logischweise nach oben. Es wird zwar die Klasse des bisher ausgewählten Menüpunkts zurückgesetzt, jedoch leider nicht die verschachtelte Klasse für die Pseudoformate, sodass die Linkfarbe falsch ist (Direkt nacheinander Menü 4, Menü 5 und Menü 6 anklicken - Menü 5 bleibt rot). Das Problem tritt aber nur auf, wenn ich den Abstand zwischen den einzelnen Menüpunkten verändere. Und zwar nur im IE. Firefox zum Beispiel funktioniert einwandfrei.

Hat hier jemand eine Ahnung woran das liegen könnte? Ich habe die Datei zur Ansicht mal auf folgenden Adresse gelegt (source Code ist etwas länger)

http://www.wanamingo.de/dummy/test/test.htm

Danke schon mal im voraus für alle Tipps

Gruß
Lars

[Ashura]

Hallo Lars.

Hat hier jemand eine Ahnung woran das liegen könnte?

Brauchst du das hier denn unbedingt?

.sm_high a:active { color: #8F2A2A; text-decoration:none; }

Ich habe die Datei zur Ansicht mal auf folgenden Adresse gelegt (source Code ist etwas länger)

Du kannst ja auch z. B. dein CSS kürzen:

.sm_high a:link { color: #8F2A2A; text-decoration:none;}
.sm_high a:visited { color: #8F2A2A; text-decoration:none; }
.sm_high a:hover { color: #8F2A2A; text-decoration:none; }
.sm_high a:active { color: #8F2A2A; text-decoration:none; }

Wird zu:

.sm_high a:link, .sm_high a:visited, .sm_high a:hover, .sm_high a:active { color: #8F2A2A; text-decoration:none; }

Zudem verstehe ich nicht ganz, warum du für ein solches Konstrukt Tabellen verwendest, wo du doch den gleichen Effekt mit zwei einfachen, verschachtelten Listen herbeiführen kannst:

  
<ul>  
  <li>Men&uuml; 1  
    <ul>  
      <li></li>  
    </ul>  
    </li>  
  <li>Men&uuml; 2  
    <ul>  
      <li></li>  
    </ul>  
  </li>  
  <li>Men&uuml; 3  
    <ul>  
      <li></li>  
    </ul>  
  </li>  
  <li>Men&uuml; 4  
    <ul>  
      <li></li>  
    </ul>  
  </li>  
  <li>Men&uuml; 5  
    <ul>  
      <li></li>  
    </ul>  
  </li>  
  <li>Men&uuml; 6  
    <ul>  
      <li></li>  
    </ul>  
  </li>  
</ul>  

Hier kannst du den Unter-<ul>'s jeweils id's zuweisen und sie so mittels DOM ansprechen.

Gruß, Ashura