CSS bei Submenü will nicht funktionieren

Hallo,

ich verwende das Modul "mootools navigation" und hab jetzt ein css-problem, welches ich nicht lösen kann.

Folgendes:
Wenn ich über das Hauptmenü fahre, funktioniert der hover Effekt, so wie er sollte.

Aber sobald ich über das Submenü fahre (siehe Bild 1) wird auch das Hauptmenü wieder gelb und das grau über dem Submenü wird im Hintergrund, wenn es aktiv ist, um jeweils 5px größer.
http://www.steinkellner-web.com/forum/navi1.jpg

Wenn ich dann über das 2. Submenü fahre, (siehe Bild 2) sieht man dann den unterschied.
http://www.steinkellner-web.com/forum/navi2.jpg

Ich möchte den Hover-Effect weg haben, wenn ich über einen Submenüpunkt fahre und der Hintergrund soll sich beim Submenü auch nicht ändern (5px an jeder Seite)

Hier mein CSS für das Menü:

Code:

---

#mainmenu li .active{margin:0px 0px 0px -5px;padding:5px;background-color:#ffff99;font-weight:bold;font-size:1em;}
#mainmenu li ul li .active{margin:0px 0px 0px -5px;padding:5px;background-color:#999999;font-weight:bold;font-size:1em;}
#mainmenu ul{margin:0px;padding:0px;list-style-type:none;}
#mainmenu li{margin:0px;padding:5px;}
#mainmenu li ul{margin:0;padding:0;list-style-type:none;}
#mainmenu li ul li{margin:0px;padding:5px 5px 5px 10px;}
#mainmenu li:hover{margin:0px;padding:5px;background-color:#ffff99;}
#mainmenu li ul li:hover{margin:0px;padding:5px 5px 5px 10px;background-color:#999999;}
#mainmenu a{display:block;text-decoration:none;font-size:1em;color:#000000;}

---

Hallo.
Ich benutze zwar das normale Menü, aber da hat man dann unterschiedliche Klassen, je weiter man in die Untermenüs geht.

Code:

---

.mod_navigation ul.level_1 {}
.mod_navigation ul.level_2 {}

---

Vielleicht gibt es bei dir auch so eine Unterscheidung.

Hi,

ja, bei mir gibt es dies auch, damit hab ich auch schon gearbeitet, ändert aber nichts am Layout.
Es ist doch egal, ob ich mit ul.level_1 oder ob ich ganz normal ul und li schreibe.

Was meint Firebug?

Wird via mootools eine andere Klasse vergeben?

Es wird für das 1. ul level_1 und für das 2. ul level_2 vergeben. Es ändert sich eigentlich nichts gegenüber des Standartmenüs

Code:

---

#mainmenu li ul li{margin:0px;padding:5px 5px 5px 10px;}

---

Möchtest du damit das Submenü ansprechen?
Sollte das nicht eher so lauten?

Code:

---

#mainmenu ul ul li{margin:0px;padding:5px 5px 5px 10px;}

---

So, nach langem hin und her hab ich es fast geschafft.

Jetzt hab ich noch ein Problem mit active.

Wenn ich jetzt einen Hauptmenüpunkt mit Submenüs habe und ich klicke den Hauptmenüpunkt an, dann ist der Hautpmenüpunkt gelb hinterlegt und fett. Auch die Submenüpunkte sind das.

Wenn ich aber nur einen Submenüpunkt anklicke, ist nur dieser Fett und gelb, so wie es auch sein soll.

Was kann ich da tun, so dass auch nur der Hauptmenüpunkt fett und gelb ist, wenn ich auf diesen klicke und die Submenüs ganz normal angezeigt werden?
(siehe Bild)
http://www.steinkellner-web.com/forum/navi3.jpg
Das ist der Code für ACTIVE:

Code:

---

#mainmenu ul.level_1 li.active{display:block;margin:0px 0px 10px 0px;padding:5px 0px 5px 5px;background-color:#ffff99;font-weight:bold;font-size:1em;}

#mainmenu ul.level_2 li.active{display:block;margin:10px 0px 0px -5px;padding:5px 0px 5px 15px;background-color:#ffff99;font-weight:bold;font-size:1em;}

---