CSS Probleme bei Navigation mit Grafik im Hauptmenü-Punkt

[kleppi]

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.

       <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

#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:
Unbenannt.png

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

[Samuell]

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

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

Hover ginge mit

a:hover {...}

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

[Socki]

Hallo klaus, hast du die Seite vl Online ?

Verusch mal:

#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

[kleppi]

Hallo,

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

Gruß Klaus