Hallo zusammen,
ich habe ein sehr exotisches Problem mit dem Hauptmenü auf meiner Seite http://dev.m3-communication.de/herbert/index.php?id=3 .
Wenn man mit der Maus über die Untermenüpunkte fährt klappt sich das Hauptmenü komischerweise ein, das passiert allerdings erst ab dem 3ten Menüpunnkt von oben.
An der jquery im Hintergrund liegt es definitiv nicht, da das Problem auch noch nach Abschalten dieser besteht.
Ich hoffe mir kann mit diesem Problem jemand weiterhelfen, ich bin im Moment echt am Ende mit meinem Latein.
# MEGA-Dropdown-Menu rendern
menu = HMENU
menu {
wrap = <div class="menu2">|</div>
# die Pages wollen wir nicht
excludeUidList =
special = directory
# Hier die Start-Page-ID angeben, deren Unterseiten das Hauptmenü abbilden
special.value = 4
# Hauptmenue
1 = TMENU
1 {
wrap = <ul class="level1"> | </ul>
expAll = 1
NO {
ATagTitle.field = title
stdWrap.prepend = COA
stdWrap.prepend.10.wrap = ~ |
wrapItemAndSub = | </li>
allWrap = <li class="inner" id="pid{field:uid}"> |
allStdWrap.insertData = 1
linkWrap = |
ATagBeforeWrap = 1
}
}
# 2. Ebene
2 = TMENU
2 < .1
2.wrap = <div class="megadd clearfix"> <ul class="level2"> | </ul></div>
2.NO.allWrap = <li class="inner2" id="pid{field:uid}"> |
# 3. Ebene
3 = TMENU
3 < .1
3.wrap = <ul class="level3" > | </ul>
3.NO.allWrap = <li class="inner3" id="pid{field:uid}"> |
# 4. Ebene
4 = TMENU
4 < .1
4.wrap = <ul class="level4" > | </ul>
4.NO.allWrap = <li class="inner4" id="pid{field:uid}"> |
}
}
.menu2 ul, .menu2 li {
list-style: none;
margin: 0;
padding: 0;
}
.menu2 ul.level1 {
height: 25px;
padding-top: 7px;
}
.menu2 ul.level1 li {
display: inline;
height: 40px;
padding: 8px;
font-weight: bold;
}
.menu2 ul.level1 li a {
padding: 10px ;
text-decoration: none;
color: #0077b9;
font-family: Arial;
font-size:14px;
font-weight:bold;
}
.menu2 ul.level2 li a {
padding: 10px ;
text-decoration: none;
color: #0077b9;
}
.menu2 ul.level1 li li a {
padding: 3px;
display: block;
color: #0077b9;
font-family: Arial;
font-size: 14px;
}
.menu2 ul.level1 a:hover,
.menu2 ul.level1 a:active,
.menu2 ul.level1 a:focus
{
color:#0077b9;
}
.menu2 ul.level2 a:hover,
.menu2 ul.level2 a:active,
.menu2 ul.level2 a:focus
{
color:#0077b9;
text-decoration:underline;
}
.menu2 ul.level1 li li {
display: block;
height: auto;
padding: 1px;
}
.menu2 ul.level1 li:hover {
color:silver;
}
.menu2 div.megadd {
position: absolute;
left: -999em;
width: 210px;
background: #fff;
z-index: 100000;
clear: both;
vertical-align: bottom;
padding: 10px;
line-height:1.4em;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-topleft: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
box-shadow: 1px 1px 5px #3c3c3c;
-webkit-box-shadow: 1px 1px 5px #3c3c3c;
-moz-box-shadow: 1px 1px 5px #3c3c3c;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#3c3c3c',direction='120',strength='3');
}
.menu2 ul.level1 li:hover div.megadd {
left: 50%;
margin-left: -50px;
}
li.inner{position:relative;}
.menu2 ul.level2 li.inner2, .menu2 ul.level2>li.inner {
width: 200px;
float: left;
}
ul.level3 li a {
padding-left: 10px;
color:#ff0000;
}
.menu2 ul.level4 {
padding-left: 20px;