CSS Menü Child-Element verändert Größe von Eltern-Element

Hallo zusammen,

ich kämpfe jetzt seit einigen Stunden mit dem CSS unseres Menüs.
Dieses ist mit den Jahren gewachsen, und nun wollte ich aufgrund der Höhe bei bestimmten Punkten das Untermenü 2-spaltig anzeigen lassen.

Hat zumindest im Firefox funktioniert, jedoch ändern diese Untermenüs ihre Größe, sobald die Höhe überschritten wird von der 3. Ebene.
Am Besten kann man es in folgendem Fiddle (3. Menüpunkt) sehen:

https://jsfiddle.net/1hjvsg8w/

Habt ihr eine Idee, wie ich die 3. Ebene einfach unabhängig vom Eltern-Element anzeigen lassen kann, quasi dass es auch unten über das Eltern-Element raus gehen kann?

Außerdem wieso die 3. Ebene in den Hintergrund rutscht bei anderen Browsern?

Danke für die Hilfe!

Gruß
Cenion