CSS Probleme bei Navigation mit Grafik im Hauptmenü-Punkt

**kleppi** · 28.02.2015, 14:10

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:
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** · 28.02.2015, 14:38

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.

**Socki** · 28.02.2015, 15:04

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