[CSS] Verschachtelte Listen mit Hover-Bullet

daniel2

Hi.

Folgendes Problem:

Ich habe zwei verschachtelte Listen, die folgerndermaßen aufgebaut sind:

<ul>
<li> <a> Liste1 </a>
<ul>
<li> <a> Liste2 </a> </li>
<li> <a> Liste3 </a> </li>
</ul> </li>
<li> <a> Liste4 </a> </li>
</ul>

Die li-elemente haben einen neuen Bullet bekommen und die Links ein eigene Farbe, alles kein Problem. Nun soll sich bei Mouseover der Bullet und die Farbe verändern.

Also ändere ich über a:hover die Linkfarbe - funktioniert tadellos. Wenn ich jetzt über li:hover das list-style-image ändern möchte sorgt diese Einstellung dafür, dass wenn ich Liste 2 mit der Maus hovere sich dann auch der Bullet von Liste1 änder, schließlich gehören Liste2 und Liste3 logisch zum li von Liste1. Dieses möchte ich vermeiden. Das HTML der Listen wird durch ein CMS generiert und ist somit leider nicht editierbar.
Als ersten Lösungsansatz bin ich von den list-style-images abgerückt und habe mein Bullet mit background-image in den <a>-Tag gepackt und ein Padding für den Text erstellt, sodass ich diesen Background auch mit a:hover ändern kann. An dieser Stelle ergibt sich ein Problem wenn der Text im span der li so lang ist, dass er umbricht. Nun steht die 2. Zeile nicht wie die erste (durch das Padding) eingerückt, sondern direkt unter dem "Bullet". Ich hab diverse Dinge ausprobiert, u.A. auch versuch den span mit display:block zu formatieren - führt dazu, dass der Text ordentlich formatiert und eingerückt ist aber der Background einfach verwindet, fragt mich nicht warum...

Ich suche also entweder
1. einen Weg li:hover benutzen zu können ohne dass das übergeordnete li auch mitselektiert wird oder
2. eine Möglichkeit, das background-image vor den Text zu ziehen oder den Text dahinter als Block darzustellen

Ich hoffe, mein Problem lässt sich nachvollziehen. Vielen Dank im Voraus.
Daniel

Scheppertreiber

Das HTML ist trotzdem falsch.

Die innere Liste sollte in <li> eingebettet sein.

daniel2

Sorry, mein Fehler, gerade editiert.

Scheppertreiber

Schau Dir mal Selektoren genauer an: "li+li"

daniel2

Ich hab mich etwas ungenau ausgedrückt. Also es ist kein Problem, dafür zu sorgen, dass die list-style-images der inneren liste sich über li:hover ändern.
Mein Problem ist, dass wenn ich für das li der äußeren Liste eine hover-regel anlege, dass diese dann auch greift wenn ich mit der Maus über die dazugehörige innere Liste fahre. Ich bin mit der Maus über "Liste2" und bei "Liste1" ändert sich der Bullet. Genau das möchte ich wenn es irgendwie geht vermeiden.

Scheppertreiber

Dann weise den ul's verschiedene Klassen oder id's zuu und selektiere das im
CSS. Probiere das dann mindestens mit FF, IE5-7 aus. Das wird lustig

daniel2

daniel2 schrieb:

Das HTML der Listen wird durch ein CMS generiert und ist somit leider nicht editierbar.

Wenn ich die Seite selbst schreiben würde wäre es sehr viel einfacher

Scheppertreiber

Warum ein CMS ? Oder vielleicht ein anderes ?

daniel2

Naja, die Vorgabe war die Seite in Joomla zu erstellen. Ich habe die Seite auch schon "zu Fuß" geschrieben...
Nur habe ich in Joomla eben nur mittelbaren Einfluss darauf wie das HTML der Seite am Ende aussieht.

Scheppertreiber

*würg* Joomla ...

Ich würde das über die Nachfahrensselektoren angehen, siehe http://www.css4you.de/. Die Syntaxfehler dürften die Browser verkraften.