Bootstrap Dropdown-Menü Überläuft, anstatt anzupassen

Ich habe eine Navigationsleiste erstellt, die eine Reihe von Menüs und Untermenüs enthält. Die Menüs sind nicht mehr sichtbar, und meine Seite scrollt, was nicht mein gewünschtes Ergebnis ist. Ich möchte, dass es von rechts nach links wechselt, wenn nicht genug Platz dafür ist.

Für meine Fiddle habe ich eine kurze Demo, die ziemlich genau meine echte Navbar darstellt. Um meine Problemposition zu replizieren, hängt die Webseite von Ihrer Auflösung ab, so dass die Navigationsleiste von der Seite weggedrängt wird. Klicken Sie auf die interaktive Registerkarte und in der rechten Spalte (ignorieren Sie das Styling), klicken Sie auf stuff system und gehen Sie in diese Untermenüs. Sie werden von der Seite nicht sichtbar sein, es sei denn, Sie scrollen, was nicht das ist, was ich will.

Ich habe versucht, right:0;left:auto; sowie Positionen für die CSS zu verwenden, wie ich in anderen Diskussionen gefunden habe, aber das hat nicht geholfen. Ich habe auch versucht, ein JQuery-Menü zu verwenden, das größtenteils funktioniert hat, aber nicht alles getan hat, was ich brauchte, so dass es momentan keine Option ist. Wie kann ich darauf reagieren und feststellen, dass die Seite nicht überlaufen kann?

UPDATE: Ich habe ein Kopfgeld erstellt, da ich eine Antwort dafür brauche. Ich habe die Frage etwas modifiziert.