✔ Menü und Submenü per CSS gestalten

[Norman_79]

Hallo liebe Gemeinde,

ich habe folgendes ich denke simples Problem welches ich einfach nicht lösen kann:

Hier ist mal folgender grober Aufbau:

<div id="wrap_left">
 <div id="menue_main">
 <div class="moduletable_DJGMENUE">
					<h3>Hauptmenü</h3>


<ul class="menu_DJGMENUE_01">

<li class="item60"><a href="http://localhost/Joomla/"><span>Home</span></a></li>
<li id="current" class="parent active item55"><a href="/Joomla/index.php/verein"><span>Verein</span></a>

<ul>
<li class="item62"><a href="/Joomla/index.php/verein/vereinsgeschichte"><span>Vereinsgeschichte</span></a></li>
<li class="item56"><a href="/Joomla/index.php/verein/vorstand"><span>Vorstand</span></a></li>
<li class="item57"><a href="/Joomla/index.php/verein/mitglieder"><span>Mitglieder</span></a></li>
</ul>

</li>
<li class="parent item67"><a href="/Joomla/index.php/juniorenkreis"><span>Juniorenkreis</span></a></li>
<li class="item59"><a href="/Joomla/index.php/links"><span>Links</span></a></li>
<li class="item61"><a href="/Joomla/index.php/impressum"><span>Impressum</span></a></li>

</ul>

</div>
</div>
</div>

Ich möchte bei meinem Menü inkl. Submenü den Link-Background beim
MouseOver und bei "a:active" in einer anderen Farbe haben.
D.h. die gesamte Zeile soll eine andere Farbe bekommen



Es funktioniert auch schon fast nur das sich der Hintergrund wenn ich den Link aktiviere komplett verändert d.h. Menü und Untermenü.

Ich hoffe ich konnte mich einigermaßen logisch ausdrücken.


Hier ist mal der CSS.Code der den BG einfärbt:

.menu_DJGMENUE_01 li.active
{

 background-color: #ffffff;

}

Wenn man den Code am Beispiel vom "Verein" ausführt wird auch der BG von der Untergeordneten UL geändert und das soll nicht passieren.

Fanke schon mal für Eure hilfe.

Mfg
Norman

 

[Maik]

Hi,

hierfür müsstest du für das Submenü eine weitere Regel definieren, damit die Hintergrundfarbe nicht vererbt wird:

.menu_DJGMENUE_01 li.active ul {
background-color:/* gewünschte Hintergrundfarbe für Submenü */;
}

mfg Maik

 

[Norman_79]

Hallo Maik,

Danke erstmal für die schnelle Antwort.


Das hatte ich auch schon probiert aber dann sieht es so aus(siehe Anhang)!
Ich denke irgendwie fehlt mir noch irgendwas(margin, padding width etc.)

 

[Maik]

Da dein CSS-Code hier nicht vollständig vorliegt, tippe ich mal darauf, dass solche eine Regel im CSS fehlt:

ul {
margin:0;
padding:0;
}

mfg Maik

 

[Norman_79]

Vielen Dank hat super geholfen.