/* Aufklappmenue "Leistungen & Wissen" — die vier Kategorien als Spalten nebeneinander, statt einer langen Liste mit seitlich ausklappender dritter Ebene. ALLE Selektoren beginnen mit #main_menu, nicht mit .main-menu. Grund: Der Theme-Customizer schreibt auf der Startseite eine Inline-Regel ".mesmerize-front-page #main_menu > li li > a { font-size: .875rem; text-transform: none; letter-spacing: 0 }". Mit einer ID darin schlaegt sie jeden reinen Klassenselektor — auf der Startseite sahen die Spaltenueberschriften deshalb aus wie die Links darunter, auf Unterseiten nicht. Das ul traegt beides (id="main_menu" class="main-menu dropdown-menu"), also kostet die ID nichts und erspart !important. Die Ausblendmechanik des Themes ist die Quelle fast aller Fallen hier: Untermenues werden NICHT mit display:none versteckt, sondern mit "opacity:0; height:0; overflow:hidden" plus overflow:hidden auf dem Menuepunkt. Ein Element mit Deckkraft 0 nimmt weiterhin Mausereignisse an. Was daraus folgt, steht bei den einzelnen Regeln. */ /* ------------------------------------------------------------------ Panel */ /* Der Menuepunkt bleibt position:relative — wie die beiden anderen Aufklappmenues des Themes. Nur dann setzt das Panel mit top:100% direkt an der Unterkante des Menuepunkts an. Mit position:static bezieht sich top:100% auf die Navigationsleiste, deren Innenabstand darunter eine 16px hohe tote Zone liess; wer den Zeiger vom Menuepunkt zum Panel bewegte, verlor dort den :hover, und das Panel schloss sich, bevor es erreichbar war. */ #main_menu > li.fdm-megamenu { position: relative; } #main_menu > li.fdm-megamenu > ul.sub-menu { display: flex; white-space: normal; /* Der Menuepunkt sitzt weit rechts: Panel nach links aufklappen. */ left: auto; right: 0; /* Senkrechtes Polster erst beim Aufklappen: zugeklappt haelt das Theme das Panel bei height:0, wegen box-sizing:border-box koennte die Hoehe aber nicht unter die Summe der Innenabstaende fallen — aus 24px + 20px wuerde ein 44px hoher, unsichtbarer Kasten quer unter der Menueleiste, der den Zeiger abfaengt. Genau das war der erste Fehler dieser Datei. */ padding: 0 28px; } #main_menu > li.fdm-megamenu:hover > ul.sub-menu, #main_menu > li.fdm-megamenu.hover > ul.sub-menu { padding: 24px 28px 20px; } /* Das Theme haengt an jede Aufklappliste einen Clearfix (ul.dropdown-menu:before/:after mit content:" " und display:table). In einem Flex-Container werden daraus zwei vollwertige Flex-Elemente: sie fressen zwei Spaltenabstaende und belegen beim Umbruch den ersten Platz, so dass in der ersten Zeile nur eine einzige Spalte steht. Ein Flex-Layout braucht keinen Clearfix. */ #main_menu > li.fdm-megamenu > ul.sub-menu::before, #main_menu > li.fdm-megamenu > ul.sub-menu::after { display: none; } /* --------------------------------------------------------------- Spalten */ #main_menu > li.fdm-megamenu > ul.sub-menu > li { padding: 0; overflow: visible; transition: none; } /* Das Theme faerbt jedes gehoverte Listenelement eines Untermenues grau ein (style.css: ul.dropdown-menu ul li:hover { background:#F8F8F8; color:#000 }). Im Mega-Menue ist das Gruppen-li die ganze Spalte — beim Zeigen auf einen einzelnen Link wurde die komplette Spalte grau und ihre Ueberschrift schwarz. Die Hervorhebung gehoert an den Link, nicht an die Spalte. */ #main_menu > li.fdm-megamenu > ul.sub-menu > li:hover, #main_menu > li.fdm-megamenu > ul.sub-menu > li.hover, #main_menu > li.fdm-megamenu > ul.sub-menu > li > ul.sub-menu > li:hover, #main_menu > li.fdm-megamenu > ul.sub-menu > li > ul.sub-menu > li.hover { background-color: transparent; color: inherit; } /* Kategorietitel als Spaltenueberschrift. Keine Abstufung ueber opacity: bei 0.62 auf Weiss ergab die Ueberschrift gemessen 2,27:1 Kontrast, die WCAG-AA-Schwelle liegt bei 4,5:1. Stattdessen eine feste Farbe, die die Schwelle einhaelt (#4a5a72 = 6,4:1), und eine Schriftgroesse, die bei Versalien noch lesbar ist. */ #main_menu > li.fdm-megamenu > ul.sub-menu > li > a { display: block; color: #4a5a72; font-size: .82em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: normal; padding: 0 0 7px; margin-bottom: 8px; border-bottom: 1px solid #d6dbe3; } #main_menu > li.fdm-megamenu > ul.sub-menu > li > a:hover { color: #223047; } /* Der Aufklapp-Pfeil ergibt bei einer Spaltenueberschrift keinen Sinn */ #main_menu > li.fdm-megamenu > ul.sub-menu > li.menu-item-has-children > a:after { display: none !important; content: none !important; } /* ---------------------------------------------------------- Dritte Ebene */ /* Dauerhaft sichtbar im Panel statt seitlich ausklappend. Bewusst OHNE visibility:visible — das Panel blendet sich unten ueber visibility aus, und ein sichtbarer Nachfahre wuerde diese Zusage aushebeln und die alte unsichtbare Trefferflaeche zurueckbringen. */ #main_menu > li.fdm-megamenu > ul.sub-menu > li > ul.sub-menu { display: block !important; position: static !important; opacity: 1 !important; height: auto !important; max-height: none !important; overflow: visible !important; width: auto !important; min-width: 0 !important; transform: none !important; background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } /* Das Theme legt neben jede seitlich ausklappende dritte Ebene einen 5px breiten, durchsichtigen Streifen als Maus-Bruecke (:before, bei umgekehrter Aufklapprichtung :after). Hier klappt nichts seitlich aus; die Streifen sind position:absolute mit height:100% des Spalten-li und ragten gemessen 12,8px unter das Panel hinaus, wo sie Klicks auf den Seiteninhalt abfingen. */ #main_menu > li.fdm-megamenu > ul.sub-menu > li > ul.sub-menu::before, #main_menu > li.fdm-megamenu > ul.sub-menu > li > ul.sub-menu::after { display: none !important; } #main_menu > li.fdm-megamenu > ul.sub-menu > li > ul.sub-menu > li { display: block; padding: 0; overflow: visible; } #main_menu > li.fdm-megamenu > ul.sub-menu > li > ul.sub-menu > li > a { display: block; color: #55627a; white-space: normal; line-height: 1.35; padding: 6px 0; font-size: .95em; } #main_menu > li.fdm-megamenu > ul.sub-menu > li > ul.sub-menu > li > a:hover { color: #111c2e; text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------- Desktop ab 768px ----- */ /* 768px ist die Grenze des Themes, nicht 991px: ab "@media (min-width: 768px) { #mainmenu_container { display: flex } }" zeigt es die Desktop-Leiste. Hier stand vorher 992px, wodurch im Band 768-991px der Mobil-Einspalter griff — ein 215px schmales, 556px hohes Panel, dessen unterste Eintraege aus dem Fenster fielen. */ @media (min-width: 768px) { /* ZWEI SPALTEN, NICHT VIER — und das ist keine Geschmacksfrage. Das Panel haengt rechts am Menuepunkt und ragt nach links darueber hinaus. Wer geradlinig zur linken oberen Ecke zieht, verlaesst den Menuepunkt ueber dessen LINKE Kante, noch oberhalb der Paneloberkante, und steht dann ueber dem Nachbar-Menuepunkt: der :hover faellt. Die Laenge dieser toten Strecke waechst mit dem Ueberhang. Vier Spalten ergaben 946px Panelbreite, 727px Ueberhang und rund 190px tote Strecke — gemessen waren 6 der 17 Links auf geradem Weg unerreichbar. Zwei Spalten ergeben 560px Breite, 341px Ueberhang und rund 72px tote Strecke, die der Nachlauf unten sicher ueberbrueckt. */ #main_menu > li.fdm-megamenu > ul.sub-menu { flex-wrap: wrap; gap: 20px 30px; width: 560px; min-width: 0; max-width: 92vw; } #main_menu > li.fdm-megamenu > ul.sub-menu > li { flex: 0 0 calc(50% - 15px); min-width: 0; } /* NACHLAUF BEIM ZUKLAPPEN. Aufklappen sofort, Zuklappen ohne Nachlauf. Innerhalb dieser Zeit bleibt das Panel sichtbar UND bedienbar; wer es betritt, stellt den :hover wieder her, weil das Panel Nachfahre des Menuepunkts ist. 600ms Ein Nachlauf waere nur noetig, wenn zwischen Menuepunkt und Panel eine tote Strecke laege — die gibt es hier nicht: Das Panel ist am Menuepunkt selbst verankert (offsetParent) und schliesst luckenlos an (gemessen 0 px). Der Zeiger wandert also direkt vom Punkt ins Panel. Zwei Bedingungen: - Der Menuepunkt darf nicht beschneiden. Das Theme setzt auf jedem li overflow:hidden und schaltet es nur im :hover auf visible; das griffe sofort und liesse den Nachlauf ins Leere laufen. - Zugeklappt muss das Panel trotzdem flaechenlos sein. Dafuer sorgen visibility:hidden (nimmt garantiert keine Mausereignisse an, auch die Nachfahren nicht) und max-height:0 mit overflow:hidden. Ein pointer-events:none waere hier falsch: ein zugeklapptes Panel, das keine Maus annimmt, kann auch nicht betreten werden — dann ist das Menue unerreichbar. */ #main_menu > li.fdm-megamenu { overflow: visible; } #main_menu > li.fdm-megamenu > ul.sub-menu { height: auto; max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; /* Kein Schliess-Nachlauf: Panel und Menuepunkt beruehren sich luckenlos (gemessen 0 px), der Zeiger kann also nicht dazwischen geraten. Nur ein kurzes Ausblenden der Deckkraft, damit es nicht hart springt — ohne Verzoegerung, sonst leuchtet das Panel nach, wenn man die Leiste nach unten verlaesst. */ transition: opacity .12s linear, visibility 0s linear .12s, max-height 0s linear .12s, padding 0s linear .12s; } /* Wandert der Zeiger auf einen anderen Punkt der Leiste, ist der Nachlauf unerwuenscht: Das Panel ueberlagerte sonst sichtbar den neuen Menuepunkt. :has() prueft, ob irgendein anderer Eintrag der obersten Ebene :hover traegt — dann faellt die Verzoegerung weg und das Panel schliesst sofort. */ #main_menu:has(> li:hover:not(.fdm-megamenu)) > li.fdm-megamenu > ul.sub-menu { transition: none; } #main_menu > li.fdm-megamenu:hover > ul.sub-menu, #main_menu > li.fdm-megamenu.hover > ul.sub-menu { max-height: none; overflow: visible; visibility: visible; opacity: 1; transition: none; } } /* ------------------------------------------------- Burger-Menue bis 767px */ /* Hier steht bewusst KEINE Regel. Das Burger-Menue ist kein Klon der Leiste, sondern ein eigenes Menue: