Hallo!
Ich habe ein kleines Problem bei der Umsetzung einer Homepage.
Zurzeit besteht die Navi aus 6 Feldern, die alle einen grauen Hintergrund und das selbe Bild beim Hover-Effekt haben.
(siehe Bild)
Nun wünscht der Kunde aber, dass jeder Navipunkt ein eigenes Hintergundbild (transparentes PNG 15% des Hover-Bildes) und ein eigenes Bild beim Hover-Effekt hat. (100% des Bildes)
Wie kann ich das umsetzen?
Ich würde ja jedem Navipunkt eine eigene Klasse geben, die ich dann im Backend eintrage.
Aber wie genau kann ich das machen?
Mir fehlt die Starthilfe :-(
CSS Code aktuell:
Code
#dropmenu a {
color:#FFFFFF;
display:block;
float:left;
font-size:18px;
margin-right:0px;
text-decoration:none;
line-height: 181px;
height: 181px;
width:180px;
padding:0px;
text-align:center;
margin-right:10px;
margin-bottom:10px;
background:url(images/menu_item.png) no-repeat;
text-transform:uppercase;
font-family: 'PT Sans Narrow', sans-serif;
}
#dropmenu a:hover {
background:url(images/menu_hover.png) no-repeat;
text-indent:-9999px;
}
#dropmenu li {float:left; position:relative;}
#dropmenu ul {position:absolute; display:none; top:30px;; left:0px;}