Zum Inhalt springen

Hauptmenü verschwindet bei Mouseover von Untermenüpunkten

Erstellt am 29. August 2013 · 2 Antworten · letzte Antwort am 29. August 2013

Tags: HTML & CSS, TYPO3 4.x, Frage

macmurdock77 ·

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;