CSS Probleme bei Navigation mit Grafik im Hauptmenü-Punkt

Hallo,


Ich möchte dem obersten Haupt-Menü-Punkt eine Grafik zufügen und habe in der Seite die Classe "viereckblau" definiert, die auch im HTML erscheint.

HTML-Code:

---

      <li class="submenu viereckblau"><a href="#" title="#" class="submenu viereckblau" role="menuitem" aria-haspopup="true">CONSTRUCTION</a>
                <ul class="level_2" role="menu">
                                    <li class="first">      <a href="#" title="#" class="first" role="menuitem">NEU- und Altbauten                          </a></li>
                                <li>                            <a href="#" title="#"                      role="menuitem">Engineering Angebote                      </a></li>
                                <li>                            <a href="#" title="#"                      role="menuitem">Reinigung Angebote                          </a></li>
                                        <li class="last">        <a href="#" title="#" class="last" role="menuitem">Umzug Angebote                                </a></li>
                      </ul>

---

das ist meine Stylesheet Angabe

Code:

---

#header .mod_navigation .viereckblau a,
#header .mod_navigation .viereckblau span {
    background-image:url("files/image/layout/viereckblau.png");
    background-repeat:no-repeat;
    padding-left:25px;
    background-position:0 10px;
}

---

meine Grafik wird nun jedoch bei allen Unterpunkten auch angezeigt
siehe hier:
Anhang 15375

Wer kann mir helfen, Grafik soll nur oben beim Hauptpunkt angezeigt werden

Ich möchte das nur beim hover über die Unterpunkte die Graik erscheint

Gruß Klaus

Alle Punkte der ersten Ebene kannst Du über den Level ansprechen

Code:

---

.level_1 > a,
.level_1 > span {....}

---

Hover ginge mit

Code:

---

a:hover {...}

---

Damit wäre es bei level 1 und immer bei hover über einen Link.

Hallo klaus, hast du die Seite vl Online ?

Verusch mal:

Code:

---



#header .mod_navigation .submenu.viereckblau > a:first-child,
#header .mod_navigation .submenu.viereckblau a:hover {
        background-image:url(files/image/layout/viereckblau.png);
        background-repeat:no-repeat;
        padding-left:25px;
        background-position:0 10px;
}

---

Gruß Socke

Hallo,

vielen Dank für eure Hilfe.
Die Lösung von samuel hat nicht geholfen.
Die Lösung von socke hat funktioniert.

Gruß Klaus