Submenus - Menuzeile verschiebt sich bzw. bricht um

[uselessmind]

Hallo!

Ich habe Schwierigkeiten die Menüzeile vernünftig darzustellen, wenn Submenus vorhanden sind. Sie bricht dabei oft um. Nicht immer, aber oft - siehe Screenshot.

Wenn mir da jemand bitte auf die Sprünge helfen könnte, freue ich mich sehr!

Genauso, wenn jemand einen Tip hat, wie man die Darstellung in der mobilen Ansicht mit reinem CSS besser lösen könnte.

Das ganze ist Teil eines Wordpress-Themes, deshalb kann ich leider nicht ohne weiteres ein Akkordeon bestehend aus <div> - Elementen benutzen.

Vielen Dank!

P.S.:

Den kompletten HTML / CSS / und zugehörigen JS-Code bekomme ich hier leider nciht angehängt und aufgrund seiner Länge nicht gepostet. Bei Interess kann ich ihn aber als "Antwort" hier bestimmt in 3 Teilen posten.

/*****************************************************************
GLOBAL for a, ul, li 
*****************************************************************/

a {
  text-decoration: none;
}

nav {
  font-family: 'Gruppo', cursive;
}

ul {
  background: darkorange;  /* darkorange */
    list-style: none;
    margin: 0;
    padding-left: 0;
    
}


li {
  display: block;
  float: left;
  padding: 0.5rem;
  position: relative;
  text-decoration: none;
}


li a{
  color: black;
  cursor: pointer;
}

li a:hover {
    color: goldenrod;
}

li a:focus {
  color: goldenrod;
}

/***** folgendes nur für die menus! */


ul li ul {
    visibility: hidden;
  opacity: 0;
  min-width: 7rem;
    position: absolute;
  transition: all 0.5s ease;
  margin-top: 0.5rem;
    left: 0;
  display: none;
}


ul li:hover > ul,
ul li ul:hover {
  background-color: goldenrod;
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  width: 100%;
}


/********************************************************************
@media
*********************************************************************/


/*************************
MENU 
*************************/


.menu-wrapper{
  grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3; 
  border-radius: 10px;
      
}

#menu-wrapper nav {
    padding-top: 1em;
    padding-right: 5em;
    margin-bottom: auto;
    float: right;
}


#menu-wrapper ul li ul li{
  background-color: white;
  width: 100%;

} /*white background of submenu-li on desktop-view */

#menu-wrapper ul li:hover ,#menu-wrapper ul li ul li:hover{
  background-color: goldenrod;
}

#menu-wrapper nav a{
    color: black;
    font-size: 1.2em;
    font-weight: bold;
}

.menu-wrapper-onscroll{
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3; 
    border-radius: 10px;
    padding-top: px;
    
}

.menu-wrapper-onscroll nav {
    border-radius: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
}



.menu-wrapper-onscroll ul li:hover, .menu-wrapper-onscroll  ul li ul li:hover  {
  background: goldenrod;

} 

#menu-wrapper ul li ul li, .menu-wrapper-onscroll ul li ul li{
  min-width: 5em;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

#menu-wrapper ul li ul li:first-child, .menu-wrapper-onscroll ul li ul li:first-child {
  border-top: px solid black;
}
#menu-wrapper ul li ul li:last-child, .menu-wrapper-onscroll ul li ul li:last-child {
  border-bottom: 1px solid black;
}


nav.menu-mobile{
  z-index: 10000;
  grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 4; 
  position: absolute;
  border-radius: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
      
}

nav.menu-mobile ul {
  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
  width: 100%;
}

nav.menu-mobile ul li {
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

    width: 100%;
    text-align: left;
    list-style: none;
    display: block;
    text-decoration: none;
    font-size: 17px;
    border-radius: 0px;
   
}

nav.menu-mobile ul li ul li {
  background-color: goldenrod;
  min-width: 5em;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-top: px solid black;
}

nav.menu-mobile ul li ul li:hover, nav.menu-mobile ul li:hover {
  background-color: goldenrod;
  min-width: 5em;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-top: px solid black;
}

nav.menu-mobile ul li ul li:first-child {
  border-top: 1px solid black;
}

nav.menu-mobile ul li ul li  a{
  color: black;
}

.onscroll {
    position: fixed; 
}

/* ------------------ sub-menus ------------*/

nav .sub-menu { 
    visibility: hidden;  
    height: 0;
    z-index: 1000; 
  }
nav .sub-menu li { 
    display: block; 
    
}

.ulSubMenuMarginLeft {
    margin-left: 30px;
} /* set by JS, menu-button-mobile.js */

[kkapsner]

Hast du einen Link, wo man sich das live ansehen kann?

PS: hab' jetzt nur oberflächig auf das CSS geschaut, aber display: block mit float: left ist nicht das was du willst. Du willst display: inline-block und auf dem Elternelement ein white-space: nowrap.

[uselessmind]

Hallo, danke erstmal für die Hilfe!

Nein, das kann man online nicht aufrufen.

Ich würde dir den Code samt JS gern hier irgendwie reinstellen, sehe aber keine Möglichkeit.

Ich habe jetzt

li {
display: inline-block;
}

und ul {
white-space: nowrap;
}

hinzugefügt. float-left bei <li> habe ich entfernt. (Float-left steht aber noch bei .menu-wrapper ul li { ... } drin - sonst löst sich das ganze menu leider aus dem css-grid raus.)

Leider ändert sich dadurch aber nichts. Es sieht noch immer aus wie auf dem von mir geposteten screenshot. Verschoben an der stelle des Listenpunkts mit dem Sub-Menu. Allerdings nur in Chrome. Im Moment. Ab und an verschiebt es sich auch in Firefox.

Gibt es eine Möglichkeit hier in der Antwort nochmal den kompletten Code zu posten, so dass du ihn kopieren und live sehen kannst?

Vielen Dank für dein Interesse!!

[mikdoe]

Ich würde dir den Code samt JS gern hier irgendwie reinstellen, sehe aber keine Möglichkeit.

Mach' bitte mit dem auf das Problem reduzierten Code ein fiddle und poste hier dessen Link.

[uselessmind]

https://jsfiddle.net/rw9g1yo6/3/

Ich hab die Struktur des Headers drin gelassen, falls es damit zusammenhängt.

[mikdoe]

Ziemlich viel CSS. Wird das alles für dieses Menü gebraucht? Habe es nur überflogen.
Jetzt sind es auch nicht mehr die Menüpunkte wie in der Ursprungsfrage. Daher die Frage, wie das im Fiddle rechts unten jetzt aussehen sollte.

[uselessmind]

Im CSS geht es wohl nur um die ersten 150 Zeilen, die die direkt für das Menü sind. Ich habe darunter noch das CSS für den Header insgesamt, falls das eine Rolle spielt. Das ganze ist eigentlich Teil eins Wordpress-Themes, Ich versuche mich grad mal daran... Zur mobilen Ansicht des Ausklapp-menü hätte ich später auch noch eine Frage gehabt, aber ich hab es jetzt erstmal entfernt in dem Fiddle.

Bei Fiddle musst du bitte mal die Fenstergröße ändern. Bei Vollbild wird es mir wie gewünscht angezeigt. Beim Verkleinern sieht man dann Verschiebungen. Die Punkte der ersten Ebene sollten halt alles immer schön hintereinander weg angezeigt werden. Bei einem Zeilenumbruch ohne leeren Raum vor dem ersten Element in der Zeile, so wie jetzt.

[uselessmind]

hat niemand eine idee, woran es liegt?

ich bedanke mich aber trotzdem.

[mikdoe]

Du könntest im Fiddle in allen drei Boxen mal alles rauswerfen, was nicht benötigt wird, um den Fehler zu sehen. Helfer haben es lieber kompakt aus Zeitgründen. Und oft sieht man dabei den Fehler schon selbst, wenn man das schrittweise macht und zwischendurch immer wieder testet.

[uselessmind]

Okay, danke, ist erledigt.

Scheint an den Zeilen 40 und 47 des CSS zu liegen. Was genau das Problem ist, verstehe ich leider trotzdem nicht.

[mikdoe]

Welcher Link führt zur letzten Version im Fiddle?

[uselessmind]

Pfff. Natürlich, war nciht gespeichert. Entschuldigung, ich dreh durch langsam.

Also nochmal: https://jsfiddle.net/82fpvnob/25/

Zeile: 36: bis zu einer schriftgröße von 1.0 rem funktionierts, ab 1.1rem leider nicht mehr.

Den zweiten möglichen Fehler finde ich grade leider nicht mehr wieder, hab ich hier wohl grad wegrationalisiert.

[mikdoe]

Frage: ist es richtig, dass man direkt alle Untermenüs sehen kann? Ist das nicht eine Art Aufklappmenü?

[uselessmind]

Bevor ich den Code zusammengestrichen habe, waren die submenus erst beim hovern auf dem jeweiligen menu-punkt zu sehen.

Die 1st-level-Punkte "subsubsub.." sind 1st-level-Punkte. Habe sie lediglich auf die Schnelle mit rein kopiert, damit, die Zeile auch garantiert mehrfach umbricht.