✔ Frage zu verschachtelter CSS Angabe

[julchen]

Hallo,
ich möchte für folgende Verschachtelung eine CSS Klasse vergeben.

<div id="menu_top">
<ul id="navigation">
<li>wert
<ul>
<li><a class="navigation_sub" href="#url">Link1</li>
</ul>
</li>
</ul>
</div>

Das "a href ..." soll bei normalem Link eine andere Formatierung bekommen, als bei hover. Wie erstelle ich dazu die verschachtelte CSS Klasse?

Für das normale "a href ..." würde ich das machen:

#navigation li ul li a.navigation_sub {Werte}

Wie sieht die Klasse bei hover aus?

Gruss
Julchen

 

[CPoly]

Falls ich dich richtig verstanden habe, dann so

#navigation a.navigation_sub {}

#navigation a.navigation_sub:hover {}

Ich habe den Selektor* noch etwas verkürzt.

*Ich denke mit "Klasse" meinst du "Selektor".

 

[julchen]

Hallo,
wie würde das ganze dann ungekürzt aussehen.

Die Klasse mit

#navigation li ul li a.navigation_sub {Werte}

funktioniert ja. Allerdings fehlt mir wie gesagt, dazu die Formatierung für das hover. Also wenn möglich bitte ungekürzt in der Form von ... li ul li ... mit hover sonst hab ich etwas Probleme mit dem Verständnis.

Gruss
Julchen

 

[Lime]

Idealerweise formatieren wir erst mal deinen Code:

<div id="menu_top">
   <ul id="navigation">
      <li>wert
          <ul>
             <li><a class="navigation_sub" href="#url">Link1</a></li>
         </ul>
      </li>
    </ul>
</div>

Der Code für einen Hover des Links müsste dann sein:

#navigation li ul li a:hover { }

Du musst ja eigentlich nur der Struktur folgen, bis du zu deinem Zielobjekt kommst. Mal abgesehen davon, dass du hier das </a> Tag vergessen hattest...
Theoretisch brauchst du die Klasse navigation_sub gar nicht, kannst sie aber noch einbauen...

 

[julchen]

Hallo,
danke schon mal. Aber leider funktioniert das so nicht mit dem Code. Beim hover erreiche ich nicht den gewünschten Effekt. Er übernimmt die Eigenschaften, welche für das a Tag defniert sind.

 

[Lime]

Logischerweise musst du zuvor die Eigenschaften vom a Tag ändern.... hiermit

#navigation li ul li a { }

Oder wo genau liegt das Problem?

 

[julchen]

Hallo,
was heisst, ich muss die Eigenschaft vom a Tag ändern?

Ich möchte folgendes erreichen:

Das im normalen a Tag eine andere color ist als bei hover.

Mein Code sieht so aus:

#navigation li ul li a.navigation_sub {color:#fff; padding:15px 20px 0 10px; background-image:none}

für hover hätte ich dann lt. deinem Tipp:
#navigation li ul li a:hover {color:#a4ca400; padding:15px 20px 0 10px; background-image:none; text-decoration:underline; }

So gehts aber leider nicht. Die Farbe bei hover ist immer noch weiss und nicht der neue Farbcode.

 

[CPoly]

Das hier ist kein gültiger Farbcode! #a4ca400

 

[julchen]

Oh Mann! Sorry, du hast natürlich Recht. Ich habs nicht bemerkt und hab mich die ganze Zeit gewundert, warum mein Code nicht funktioniert.

Danke Dir!

Jetzt hab ich aber noch ein anderes Problem, was aber ähnlich ist. Ich bekomme beim hover auf der obersten Ebene der Navigation das Background-Image nicht gelöscht, bei den Links welche nicht den kleine Pfeil nach unten haben zum Untermenü. Bei denen wo kein Untermenü hinterlegt ist, soll bei hover kein Background-image in Form eine kleinen Pfeils erscheinen. Wo liegt da jetzt der Fehler.

Sorry, aber ich hatte mir den Code bei cssplay heruntergeladen und etwas umgestrickt, so das sich diesen jetzt nicht mehr hinbekomme. Ich habe auch alle Klassenbezeichnungen geändert. Da wo navigation stand ist jetzt dropline und wo navigation_sub steht ist jetzt down_sub.

Hier ist die Beispielseite:

http://www.plastisches.de/becker/index.html

Kannst du mir nochmal helfen?

Dank Dir!!

Gruss
Julchen

 

[CPoly]

Das kommt von dieser Regel

#dropline li:hover > a {color:#a4c400; background:url(../images/down_over.gif) no-repeat right center;}

Die sollte sich natürlich nur auf Links beschränken, die auch Untermenüs haben.

#dropline li:hover > a {color:#a4c400;}

#dropline li:hover > a.down {background:url(../images/down_over.gif) no-repeat right center;}