Hey @yzarda
Danke für den Code - hast du diesen von ChatGPT da der Code Kommentare in SIE-Form auf allen Zeilen drin hat?
An erster Stelle ist wichtig das NICHT im Live Theme zu machen sondern oder in einer Theme Kopie/Testumgebung. Ich habe jetzt auch deinen CSS Code in meiner Dawn Testumgebung getestet und konnte dein gemeldest Problem nicht reproduzieren. Somit sitzt der Wurm irgendwo auf deiner Seite und gerne kann ich einen Experten empfehlen - ich sehe aber du hast deine Frage im Englischen Design Forum auch gestellt. Da werden sich Experten bei dir melden, wie werden aber einen direkten Link zu einem Beispiel brauchen ansonsten werden sich da nicht viele melden.
Ich habe jetzt auch den HTML Code der Untermenüs auf mobile in meinem Dawn Theme aus der Dev Console unten reinkopiert:
- dfgdfgdfg
Basierend auf deiner Beschreibung, scheint das Problem zu sein, dass die Untermenüs nicht korrekt angezeigt werden, wenn du ihre Breite auf 80% der Gesamtbreite der Navigation einstellst. Eine typische Lösung wäre, den CSS-Code so anzupassen, dass er nicht nur die Hauptmenüpunkte, sondern auch die Untermenüpunkte berücksichtigt:
Beachte, dass ich die Class .submenu in den CSS-Code eingefügt habe, die als Platzhalter für die Untermenü-Strukturen dient. Einfach die Class entsprechend für Untermenüs im HTML anpassen.
Wenn das nicht klappt musst du es so steuern, dass nur das aktive Untermenü (identifiziert durch eine spezielle Klasse wie .menu-opening) sichtbar ist, während andere Menüpunkte ausgeblendet werden, wenn ein Untermenü geöffnet ist. Dies kann hilfreich sein, um die Navigation auf Mobilgeräten übersichtlicher und benutzerfreundlicher zu gestalten.
Der erste CSS-Selektor ul.menu-drawer__menu.has-submenu.list-menu.submenu-open > li wählt alle Listenelemente (<li>) innerhalb des übergeordneten <ul>-Elements aus, das die Klassen .menu-drawer__menu, .has-submenu, .list-menu, und .submenu-open enthält. Diese Elemente werden ausgeblendet (display: none;), wenn das Untermenü geöffnet ist.
Der zweite CSS-Selektor ul.menu-drawer__menu.has-submenu.list-menu.submenu-open > li:has(.menu-opening) wählt spezifisch die Listenelemente aus, die ein Kind-Element mit der Klasse .menu-opening enthalten, und stellt sicher, dass diese sichtbar sind (display: block !important;), auch wenn andere Teile des Menüs ausgeblendet sind. Dies ermöglicht es, dass nur das aktive Untermenü angezeigt wird, während andere Menüpunkte verborgen bleiben.
Hoffe das hilft dir weiter - lass wissen falls nicht! 
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 
in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.