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.