Solved submenu bug

app/static/css/default.css

@@ -137,3 +137,22 @@ h3.footer-title{
   display: block;
   opacity: 1;
 }
+
+
+.dropdown-submenu > .dropdown-menu {
+  position: absolute;
+  top: 0;
+  left: 100%; /* Standardmäßig rechts ausrichten */
+  margin-top: -1px;
+  z-index: 1050;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+  opacity: 1;
+}
+
+.dropdown-submenu > .dropdown-menu[style*="right: 100%"] {
+  left: auto; /* Überschreibt die linke Position, wenn nach links geöffnet */
+}

app/static/js/submenus.js

@@ -9,6 +9,19 @@ document.addEventListener('DOMContentLoaded', () => {
             clearTimeout(timeout);
             const menu = submenu.querySelector('.dropdown-menu');
             if (menu) {
+                // Dynamische Positionierung
+                const rect = menu.getBoundingClientRect();
+                const viewportWidth = window.innerWidth;
+
+                // Überprüfen, ob Platz nach rechts ist, sonst nach links öffnen
+                if (rect.right > viewportWidth) {
+                    menu.style.left = 'auto';
+                    menu.style.right = '100%';
+                } else {
+                    menu.style.left = '100%';
+                    menu.style.right = 'auto';
+                }
+
                 menu.style.display = 'block';
                 menu.style.opacity = '1';
             }