[CSS] Fotos in Dropdownmenü durchwechseln

[jomi]

Ich programmiere derzeit an einem Dropdownmenü rum (einfach per <ul> erstellt), sagen wir mal es hat den Titel "Früchte" und als Menüpunkte "Apfel", "Birne" und "Pflaume". Mein Ziel ist, wenn der Mauszeiger auf einem der Menüpunkte ist, ein entsprechendes Foto unten im Menü anzuzeigen.

Per Javascript ist das ja verhältnismäßig einfach:
Ich füge unter "Pflaume" einen weiteren Menüpunkt hinzu, wo aber keine Frucht hinkommt, sondern das jeweilige Bild. Dann schreibe ich ein kleines Script, dass als Mouseover-Event von jedem Menüpunkt aufgerufen wird und unten das jeweilige Bild aufrauft (z.B. indem es den Wert des CSS-Elementes Background entsprechend abändert). Pseudocode:

function BildWechseln () {
var bildmenupunkt = this.parentElement.lastChild;
bildmenupunkt.style.background = 'apfel.jpg';
}



Fällt euch irgendeine Möglichkeit ein, die selbe Funktionalität auch ohne Javascript (also nur mit HTML und CSS) zu erreichen?

 

[jomi]

So, nach langem Rumprobieren war das Problem weg. Vielleicht war es dann besoffen…

Jetzt bleibt aber noch ein kleines Problem:
Die CSS-Eigenschaft -webkit-border-radius funktioniert im untenstehenden Quellcode nur für die Bilder, nicht für den Hintergrund… Hat irgendjemand eine Ahnung, woran das liegt bzw. wie es zu beheben oder umgehen ist?

HTML-Seite:

<ul>
<li id="apfel"><a href="apfel.html">Apfel</a></li>
<li id="birne"><a href="birne.html">Birne</a></li>
<li id="pflaume"><a href="pflaume.html">Pflaume</a></li>
</ul>

und der CSS-Code dazu:

body {
	background-color: white;
}
li {
	background-color: black;
}

li, li a {
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}

.apfel a {
	padding-bottom: 126px !important;
}
.birne a {
	margin-top: -121px !important;
	padding-bottom: 101px !important;
}
 .pflaume a {
	margin-top: -96px !important;
	padding-bottom: 76px !important;
}