CSS-Codes für die Navi

Icons vor den Menüpunkten

Mit diesem Code kannst du für jeden (Unter-)Menüpunkt ein eigenes Icon setzen.

Als Beispiel setzen wir ein Icon für den Hauptmenüpunkt "Startseite":

#mainbar a[href="/HOME.html"] {
background-image: url(ICON-URL);
background-position: 4px 5px;
background-repeat: no-repeat;
}

Erklärung:

Bei "/HOME.html" kommt der Link rein, auf welchen jeweils die Menüpunkte zeigen. Bei eigenen Seiten das p. nicht vergessen!

Bei "ICON-URL" kommt der Pfad zum Icon hinein.

background-position → Linke Zahl verschiebt nach rechts/links, rechte Zahl nach unten/oben

Falls du bei Mauskontakt ein anderes Icon haben willst, dann kannst du das mit dem Hover-Modus realisieren:

#mainbar a:hover[href="/HOME.html"] {
background-image: url(ICON-URL);
background-position: 4px 5px;
background-repeat: no-repeat;
}

Jetzt musst du allerdings nur den Pfad zu deinem Icon ändern, der restliche Code bleibt so wie der ohne Hover.
Mein Tipp ist es bei beiden Codes jeweils das gleiche Bild nur mit anderen Farben zu nehmen.

Für Icons im Untermenü musst du diesen Bereich ansprechen (und eventuell den Text nach rechts rücken):

#mainbar ul li ul li a[href="/p.beispiel.html"] {
padding-left: 30px;
...
}

padding-left → Abstand des Textes zum linken Rand

Wenn du das nicht kapiert hast und eine bildlichere Darstellung benötigst, sieh mal hier nach.