[megamenu] Stylen des Megamenu - Hilfe benötigt

[sgei]

Hallo Leute,

ich habe beim Stylen der 1. Ebene im Menü einen Fehler und kann ihn nicht finden.
Vielleicht kann mal bitte ein CSS-Experte drüber schauen...

Hier geht's zum Beispiel: http://www.geier-media.de/contao33/

Das Problem ist, dass der Link "Ebene 1a" die gesamte Breite der Liste einnimmt und ich nicht weiß, wo der Hund begraben ist...
Eigentich soll links und rechts von dem Link nur ein Padding von 5px sein.

Hier mein CSS:

/*spricht alle Megamenues an*/
.mod_megamenu {
}
/*spricht alle Listen von allen Megamenues an*/
.mod_megamenu ul {
    margin:0;
}
/*spricht das Megamenu mit der ID "mainnav" an*/
#mainnav {
    width:100%;
    height:30px;
    left:0;
    top:0;
    position:absolute;
    overflow:visible;
    background-color:#c2c2c2;
    z-index: 1000;
}
/*1. Ebene - Liste*/
#mainnav ul.level_1 {
    height:30px;
}
/*1. Ebene - Listenelemente*/
#mainnav ul.level_1 > li {
    float:left;
    display:block;
    margin-right:5px;
    background-color: rgba(255, 255, 255, 0);
    -webkit-transition: background-color 0.4s ease 0s;
    -moz-transition: background-color 0.4s ease 0s;
    -o-transition: background-color 0.4s ease 0s;
    transition: background-color 0.4s ease 0s;
}
#mainnav ul.level_1 > li:hover {
    background-color:rgba(255, 255, 255, 1);
    cursor: pointer;
}
/*alle "a" !!!*/
#mainnav ul.level_1 > li a,
#mainnav ul.level_1 > li span {
    display:block;
    padding-right:10px;
    padding-left:10px;
    line-height:30px;
    text-decoration:none;
    color:#000;
}
/*2. Ebene - Liste*/
#mainnav ul.level_1 > li > ul {
    height:auto;
    overflow:hidden;
    border-bottom:3px solid #c20000;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease 0s;
    -moz-transition: opacity 0.4s ease 0s;
    -o-transition: opacity 0.4s ease 0s;
    transition: opacity 0.4s ease 0s;
}
#mainnav ul.megamenu {
    width:100%;
    left:0;
    top:30px;
    position:absolute;
    background-color:#FFF;
}
#mainnav ul.level_1 > li > ul.megamenu > li {
    width:100%;
    height:auto;
}
#mainnav ul.level_1 > li:hover > ul {
    cursor: auto;
    opacity: 100;
    visibility: visible;
}
/*Wertigkeit für "li.active" wird auf höchste Priorität gesetzt*/
#mainnav ul.level_1 > li.active {
    background-color: rgba(255, 255, 255, 1) !important;
}
#mainnav ul.level_2 {
    width:auto;
    height:auto;
    position:relative;
    overflow:visible;
    display:block;
    background-color:#FFF;
}
#mainnav ul.level_2 li {
    width:auto;
    height:auto;
    float:none;
    display:block;
}
#mainnav ul.level_2 li a:hover {
    text-decoration:underline;
}

Ich danke euch schon mal.

Ach ja, hier ein Beispiel wo es super geht: http://www.calmbach.com/contaodreiei...est/start.html

Dort ist es allerdings so, dass die <li> vom level_1 bei deaktivierten Megamenu die CSS-Klasse "nomega" bekommen. Damit lässt sich dann ein position:relative für diese <li> setzen...
Muss da das Template geändert werden?

Steffen

[sgei]

Hallo,

nach Analyse des CSS im funktionierenden Beispiel habe ich doch eine Lösung gefunden:

Die CSS-Klasse "nomega" oder halt eine andere wird in der Seitenstruktur gesetzt.
Damit kann man dann

/*Klasse "nomega" muss in Seitenstruktur gesetzt werden*/
#mainnav ul.level_1 > li.nomega {
position:relative;
}
#mainnav ul.level_2 {
width:auto;
height:auto;
left:0;
position:absolute;
overflow:visible;
display:block;
background-color:#FFF;
}
#mainnav ul.level_2 li {
width:auto;
height:auto;
float:none;
display:inline-block;
white-space: nowrap;
}


Steffen

[tilda]

Hallo Steffen,

vielen Dank für deine CSS. Ich sitze nun seit Tagen an einer Lösung für mein Megamenü,
und habe es Dank deiner CSS nun endlich geschafft, dass alle Menüpunkte sichtbar werden.

Aber ein Problem ist geblieben:

Wenn ich das Untermenü (Level 2) anklicken möchte, dann verschwindet es.

Hast du eine eine Idee?

Viele Grüße
Tilda