[megamenu] Stylen des Megamenu - Hilfe benötigt
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:
Code:
/*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
