XHTMLforum - Grafik des Hauptmenüpunktes bei Aktivierung eines Links des Untermenüs verschwunden

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

Grafik des Hauptmenüpunktes bei Aktivierung eines Links des Untermenüs verschwunden

Hallo liebe CSS-Profis,
ich habe ein kleines Problem mit meiner verschachtelten Liste.
Diese sieht wie folgt aus:

Code:

<ul><li><a>Haupteintrag</a>
<ul>
<li><a>Unterpunkt 1</a></li>
<li><a>Unterpunkt 2</a></li>
</ul>
</li>
</ul>

Wird nun zum Beispiel Unterpunkt 2 angeklickt, verschwindet die Hintergrundgrafik vom Haupteintrag. Ist dein Unterpunkt angeklickt, ist die Grafik noch da.
Ich kann mir das absolut nicht erklären. Ich denke mal, dass es an der verschachtelten Liste liegt.
Ich habe versucht, die Liste mit dem Haupteintrag eine Klasse zu geben, leider erfolgslos.

Hier ist der CSS-Code:

Code:

#container #links UL UL 

{margin-top: 10px;

padding: 0;

margin: 10px 0 0 -7px;

width: 178px;

font-size: 1.2em;  
}

#container #links UL UL LI 

{list-style: none;

background: url(img/hg-button-menue2-inaktiv.png) no-repeat bottom;

padding: 0;

margin: 0;

min-height: 17px;

_height: 20px;

line-height: 15px;
}

#container #links UL UL LI A 

{text-decoration: none;

font-size: 0.7em;

font-weight: bold;

color: #094018;

display: block;

padding: 2px 0 1px 16px;

min-height: 17px;

letter-spacing: -0.04em;
}

#container #links UL UL LI A:HOVER,

#container #links UL UL LI.aktiv A 

{background: url(img/hg-button-menue2-aktiv.png) no-repeat bottom;

color: #1E6930;
}

#container #links UL UL LI.aktiv LI A 

{background: url(img/hg-button-menue2-cat1-inakt.png) no-repeat bottom;

padding: 2px 0 2px 25px;

color: #094018;
}

/*

# # # # # # # # Unterkategorie 1

*/

#container #links UL UL UL

{padding: 0;

margin: 0;

width: auto;
}

#container #links UL UL UL LI

{background: url(img/hg-button-menue2-cat1-inakt.png) no-repeat bottom #A3C02A;
}

#container #links UL UL UL LI A 

{font-size: 0.65em;

padding: 2px 0 2px 25px;
}

#container #links UL UL UL LI A:hover,

#container #links UL UL UL LI.aktiv A

{background: url(img/hg-button-menue2-cat1-aktiv.png) no-repeat bottom;
}

#container #links UL UL UL LI.aktiv LI A 

{background: url(img/hg-button-menue2-cat2-inakt.png) no-repeat bottom;

padding: 2px 0 2px 30px;

color: #094018;
}

Ich wäre für Tipps, wie man diese Hintergrundgrafik beibehalten kann, sehr dankbar.
Ich bedanke mich sehr für eure Mühen.
Beste Grüße
Maik

Poste mal einen Link, Deine Grafiken hat hier niemand (und in 50% aller Fälle zeigen gepostete Code-Schnipsel eh den Fehler nicht).

Und wirf diese unsägliche Vert'zenrt. per height und line-height raus - beide Eigenschaften weg und mit padding zentr.

Vielen Dank für deine Antwort heiko.

Hier ist der Link zu der Seite:

los-crachos-headshop.de

Wenn du dort beispielsweise Glasbongs unter der Rubrik Bong Shop anklickst und dann einen Unterpunkt auswählst, verschwindet einfach die Grafik von Glasbongs (Pfeil). Ich kann das nicht nachvollziehen.

Beste Grüße
Maik

Die Grafik ist schon da. Sie wird unten im li-Element positioniert. Bei geöffnetem Submenü ist das li-Element aber (zu) hoch wegen des Submenüs.
Im aktiven Zustand liegt die Grafik im Link. Der ist nicht so hoch.

Vielen Dank für eure Antworten.

Zitat:

im FF 3.6.12 und IE8 sehe ich die Grafik(http://los-crachos-headshop.de/templ...tton-menue.jpg) auch wenn ich einen Untermenüpunkt ausgewähle

Diese Grafik meine ich nicht. Ich meine den Pfeil mit dem Unterstrich hinter jedem Listeneintrag.
Wenn zum Beispiel auf Glasbongs geklickt wird, klappt ein Untermenü auf. Klickt man da ein Untermenüpunkt an, verschwindet der Pfeil vor "Glasbongs".

Die Grafik habe ich nicht dem A-Element zugewiesen sondern dem LI-Element. Ich komme mit dieser Schachtelung einfach nicht klar. Sobald ein Untermenüpunkt angeklickt ist, verschwindet einfach die Grafik vom Hauptmenüpunkt, sehr eigenartig.

Zitat:

Die Grafik ist schon da. Sie wird unten im li-Element positioniert. Bei geöffnetem Submenü ist das li-Element aber (zu) hoch wegen des Submenüs.
Im aktiven Zustand liegt die Grafik im Link. Der ist nicht so hoch.

Achso, deshalb habe ich vorher das Problem gehabt, dass er immer vor dem letzten Listeneintarg diese Grafik eingefügt hat ...
Das habe ich dadurch behoben, dass ich nach dem URL-Befehl die Farbe des Hintergrundes gesetzt habe.
Vielleicht habe ich erfolg, wenn ich den A-Elementen die Grafik zuweise. Ich melde mich wieder bei Euch.

Besten Dank für eure Hinweise und Tipps.
Beste Grüße
Maik

Die Nachteile Deiner bottom-Pos. siehst Du auch bei zweizeiligen Menüpunkten. Listensymbole am besten immer mit einem vert. Wert in em ausrichten, z.B. 0 .3em - dann wandern sie bei Textzoom langsam mit nach unten. Nur wenn ein Zeilenumbruch absolut ausgeschlossen ist, kann man auch 0 50% o.ä. schreiben (in Deinem Fall aber nicht).

In jedem Falle solltest Du das Listensymbol von der border trennen, d.h. nicht in beides in eine Grafik stecken (für border brauchst Du eh keine Grafik).

Danke für die hilfreiche Antwort.
Ich arbeite im Rahmen meines Praktikums an dieser Seite und arbeite an dem Menü.
Die Grafik mit dem Pfeil soll aber so bleiben.
Nun weiß ich aber auch, dass die Zeile:

Code:

background: url(img/hg-button-menue2-cat1-inakt.png) no-repeat bottom #A3C02A;

gar keinen Sinn macht mit der Farbangabe dahinter. Ich bin mir zuerst gar nicht darüber im klaren gewesen, dass die Liste durch die Unterkategorien logischer Weise größer wird und die Grafik leider nach unten (bottom) rutscht.

Naja, dank euch bin ich jetzt auf jeden Fall schlauer und werde mal sehen, ob ich dieses Problem gelöst bekomme. Ich melde mich dann wieder bei euch, sobald ich Erfolg habe ;)
Beste Grüße und noch einmal vielen Dank für Eure Hilfe.
Maik

Hallo Leute,
Ihr habt mir sehr weiter geholfen, dafür vielen Dank.

Es funktioniert jetzt mit der Menüdarstellung.
Ich habe die Grafik nicht den LI-Elementen zugewiesen sondern den A-Elementen.
Ich hab den Wald vor lauter Bäumen nicht mehr gesehen somal der Webdeveloper für FF den Listeneintrag Glasbongs nicht größer dargestellt hat.

@fricca: Das war der entscheidene Hinweis, danke.

Ich muss noch viel lernen, was CSS betrifft. Vor allem die Erbung und die Schachtellung ...

Beste Grüße und besten Dank an alle.
Maik