diff --git a/app/static/css/navigation.css b/app/static/css/navigation.css
index 1957d21..9a37443 100644
--- a/app/static/css/navigation.css
+++ b/app/static/css/navigation.css
@@ -1,15 +1,20 @@
-/* Dropdown-Menüs verstecken */
-.dropdown-menu {
-    display: none;
-    opacity: 0;
-    visibility: hidden;
-    width: max-content !important; /* Passt die Breite an das breiteste Item an */
-    box-sizing: border-box; /* Berücksichtigt Innenabstand und Rahmen */
+/* Top-Level Dropdown-Menü */
+.nav-item .dropdown-menu {
+    position: absolute; /* Wichtig für Positionierung */
+    top: 100%; /* Standardmäßige Öffnung nach unten */
+    left: 0;
+    z-index: 1050; /* Damit das Menü über anderen Elementen liegt */
 }
 
-/* Positionierung von Submenüs */
+/* Submenu-Position */
 .dropdown-submenu > .dropdown-menu {
     position: absolute;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
     top: 0;
+    left: 100%; /* Öffnen nach rechts */
+    z-index: 1050;
+}
+
+/* Sicherstellen, dass der Übergang smooth ist */
+.dropdown-menu {
+    transition: all 0.3s ease-in-out;
 }
diff --git a/app/static/js/navigation.js b/app/static/js/navigation.js
index 595989a..bdc1496 100644
--- a/app/static/js/navigation.js
+++ b/app/static/js/navigation.js
@@ -70,45 +70,43 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
-  function adjustMenuPosition(submenu, parent, isTopLevel) {
+function adjustMenuPosition(submenu, parent, isTopLevel) {
     const rect = submenu.getBoundingClientRect();
     const parentRect = parent.getBoundingClientRect();
 
-    // Platzberechnung
     const spaceAbove = parentRect.top;
     const spaceBelow = window.innerHeight - parentRect.bottom;
     const spaceLeft = parentRect.left;
     const spaceRight = window.innerWidth - parentRect.right;
 
-    // Standardpositionierung
     submenu.style.top = '';
     submenu.style.bottom = '';
     submenu.style.left = '';
     submenu.style.right = '';
 
     if (isTopLevel) {
-      // Top-Level-Menüs öffnen nur nach oben oder unten
-      if (spaceBelow < rect.height && spaceAbove > rect.height) {
-        submenu.style.bottom = `${window.innerHeight - parentRect.bottom - parentRect.height}px`;
-        submenu.style.top = 'auto';
-      } else {
-        submenu.style.top = `${parentRect.height}px`;
-        submenu.style.bottom = 'auto';
-      }
+        // Top-Level-Menü
+        if (spaceBelow < spaceAbove) {
+            submenu.style.bottom = `${window.innerHeight - parentRect.bottom - parentRect.height}px`;
+            submenu.style.top = 'auto';
+        } else {
+            submenu.style.top = `${parentRect.height}px`;
+            submenu.style.bottom = 'auto';
+        }
     } else {
-      // Submenüs öffnen in die Richtung mit mehr Platz
-      const prefersRight = spaceRight >= spaceLeft;
-      submenu.style.left = prefersRight ? '100%' : 'auto';
-      submenu.style.right = prefersRight ? 'auto' : '100%';
+        // Submenü
+        const prefersRight = spaceRight >= spaceLeft;
+        submenu.style.left = prefersRight ? '100%' : 'auto';
+        submenu.style.right = prefersRight ? 'auto' : '100%';
 
-      // Öffnen nach oben, wenn unten kein Platz ist
-      if (spaceBelow < rect.height && spaceAbove > rect.height) {
-        submenu.style.top = 'auto';
-        submenu.style.bottom = `${parentRect.bottom - parentRect.top - rect.height}px`; // Höhe des Submenüs wird berücksichtigt
-      } else {
-        submenu.style.top = '0';
-        submenu.style.bottom = 'auto';
-      }
+        // Nach oben öffnen, wenn unten kein Platz ist
+        if (spaceBelow < spaceAbove) {
+            submenu.style.bottom = `0`;
+            submenu.style.top = `auto`;
+        } else {
+            submenu.style.top = `0`;
+            submenu.style.bottom = '${parentRect.height}px';
+        }
     }
-  }
+}
 });
diff --git a/app/templates/moduls/navigation.html.j2 b/app/templates/moduls/navigation.html.j2
index 3d5e079..41755c7 100644
--- a/app/templates/moduls/navigation.html.j2
+++ b/app/templates/moduls/navigation.html.j2
@@ -37,7 +37,7 @@
 <!-- Navigation Bar -->
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="container-fluid">
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav{{menu_type}}" aria-controls="navbarNav{{menu_type}}" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler" type="button" data-bs-target="#navbarNav{{menu_type}}" aria-controls="navbarNav{{menu_type}}" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNav{{menu_type}}">
@@ -53,7 +53,7 @@
                     {% else %}
                         <!-- Dropdown Menu -->
                         <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" id="navbarDropdown{{ loop.index }}" role="button" data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false">
+                            <a class="nav-link dropdown-toggle" id="navbarDropdown{{ loop.index }}" role="button" data-bs-display="dynamic" aria-expanded="false">
                                 {% if item.icon is defined and item.icon.class is defined %}
                                     {{ render_icon_and_name(item) }}
                                 {% else %}