diff --git a/public/css/styles.css b/public/css/styles.css
index 51cd420..cd85c80 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -113,8 +113,9 @@
   --gradient-end-trans: #764ba215;
 }
 /* Base styles */
-html, body {
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+html,
+body {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   background-color: var(--bg-body);
   color: var(--text-main);
   min-height: 100vh;
@@ -128,7 +129,11 @@
 }
 .pattern-dots {
   position: relative;
-  background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
+  background-image: radial-gradient(
+    circle,
+    rgba(0, 0, 0, 0.07) 1px,
+    transparent 1px
+  );
   background-size: 15px 15px;
   z-index: 0;
 }
@@ -137,7 +142,11 @@
   pointer-events: none;
   position: absolute;
   inset: 0;
-  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 1) 90%
+  );
 }
 .pattern-dots > * {
   position: relative;
@@ -147,7 +156,7 @@
   display: none;
 }
 .inline {
-  display: inline
+  display: inline;
 }
 footer {
   background-color: var(--bg-footer);
@@ -242,7 +251,7 @@
   color: var(--text-light);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   position: relative;
-  z-index: 1;
+  z-index: 10;
 }
 header#site-header .container {
   max-width: 800px;
@@ -353,7 +362,7 @@
   display: flex;
   gap: 1rem;
   position: relative;
-  z-index: 10;
+  z-index: auto;
 }
 header#site-header nav.site-nav a,
 nav.site-nav .dropdown-content form button {
@@ -388,22 +397,22 @@
 nav.site-nav .dropdown {
   position: relative;
   display: block;
-  z-index: 11;
+  z-index: 1;
 }
 nav.site-nav .dropbtn {
   display: inline-block;
   cursor: pointer;
 }
 nav.site-nav .dropdown-content {
-  z-index: 11;
+  z-index: 1;
   display: none;
   position: absolute;
   background-color: white;
   min-width: 160px;
-  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
 
-  flex-direction: column;   
-  white-space: nowrap; 
+  flex-direction: column;
+  white-space: nowrap;
   left: 0;
   top: 100%;
 }
@@ -436,6 +445,7 @@
   gap: 1rem;
   width: 100%;
   padding-left: 64px; /* Same as icon width + gap to align with site title */
+  isolate: isolate;
 }
 /* Logo icon that acts as home link - spans from site title to nav */
 .nav-logo {
@@ -452,8 +462,8 @@
   top: 0;
   left: 100%; /* shift nested submenu to the right */
   margin-left: 0.2rem; /* small gap */
-  min-width: 160px;  
-  z-index: 12;
+  min-width: 160px;
+  z-index: auto;
 }
 nav.site-nav .dropdown-content .dropdown:hover > .dropdown-content {
   display: block;
@@ -465,6 +475,24 @@
 nav.site-nav .dropdown-content > .dropdown:hover > .dropdown-content {
   display: block;
 }
+/* Nested Submenu Positioning */
+nav.site-nav .dropdown-content .dropdown-content {
+  top: 0;
+  left: 100%;
+  margin-left: 0.2rem; /* The visual gap */
+  min-width: 160px;
+  z-index: 100; /* Ensure it is above other page content */
+}
+/* The Bridge: Fills the 0.2rem dead zone with an invisible hit-box */
+nav.site-nav .dropdown-content .dropdown:hover > .dropdown-content::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -0.3rem; /* Slightly larger than the margin to ensure overlap */
+  width: 0.3rem;
+  height: 100%;
+  background: transparent;
+}
 /* Reset */
 * {
   margin: 0;
diff --git a/src/css/base.css b/src/css/base.css
index 8d43809..4839b1d 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -1,6 +1,7 @@
 /* Base styles */
-html, body {
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+html,
+body {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   background-color: var(--bg-body);
   color: var(--text-main);
   min-height: 100vh;
@@ -16,7 +17,11 @@
 
 .pattern-dots {
   position: relative;
-  background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
+  background-image: radial-gradient(
+    circle,
+    rgba(0, 0, 0, 0.07) 1px,
+    transparent 1px
+  );
   background-size: 15px 15px;
   z-index: 0;
 }
@@ -26,7 +31,11 @@
   pointer-events: none;
   position: absolute;
   inset: 0;
-  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 1) 90%
+  );
 }
 
 .pattern-dots > * {
@@ -37,5 +46,5 @@
   display: none;
 }
 .inline {
-  display: inline
+  display: inline;
 }
diff --git a/src/css/header.css b/src/css/header.css
index 9d9bf06..d615d0a 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -4,7 +4,7 @@
   color: var(--text-light);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   position: relative;
-  z-index: 1;
+  z-index: 10;
 }
 
 header#site-header .container {
diff --git a/src/css/nav.css b/src/css/nav.css
index 1ba2b34..cf6aa75 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -2,7 +2,7 @@
   display: flex;
   gap: 1rem;
   position: relative;
-  z-index: 10;
+  z-index: auto;
 }
 header#site-header nav.site-nav a,
 nav.site-nav .dropdown-content form button {
@@ -41,7 +41,7 @@
 nav.site-nav .dropdown {
   position: relative;
   display: block;
-  z-index: 11;
+  z-index: 1;
 }
 
 nav.site-nav .dropbtn {
@@ -50,15 +50,15 @@
 }
 
 nav.site-nav .dropdown-content {
-  z-index: 11;
+  z-index: 1;
   display: none;
   position: absolute;
   background-color: white;
   min-width: 160px;
-  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
 
-  flex-direction: column;   
-  white-space: nowrap; 
+  flex-direction: column;
+  white-space: nowrap;
   left: 0;
   top: 100%;
 }
@@ -77,7 +77,6 @@
   background-color: var(--bg-footer); /* Match the main nav hover color */
 }
 
-
 header#site-header .menu-toggle {
   display: none;
   background: none;
@@ -97,6 +96,7 @@
   gap: 1rem;
   width: 100%;
   padding-left: 64px; /* Same as icon width + gap to align with site title */
+  isolate: isolate;
 }
 
 /* Logo icon that acts as home link - spans from site title to nav */
@@ -111,15 +111,12 @@
   bottom: 1rem;
 }
 
-
-
-
 nav.site-nav .dropdown-content .dropdown-content {
   top: 0;
   left: 100%; /* shift nested submenu to the right */
   margin-left: 0.2rem; /* small gap */
-  min-width: 160px;  
-  z-index: 12;
+  min-width: 160px;
+  z-index: auto;
 }
 nav.site-nav .dropdown-content .dropdown:hover > .dropdown-content {
   display: block;
@@ -133,3 +130,22 @@
 nav.site-nav .dropdown-content > .dropdown:hover > .dropdown-content {
   display: block;
 }
+/* Nested Submenu Positioning */
+nav.site-nav .dropdown-content .dropdown-content {
+  top: 0;
+  left: 100%;
+  margin-left: 0.2rem; /* The visual gap */
+  min-width: 160px;
+  z-index: 100; /* Ensure it is above other page content */
+}
+
+/* The Bridge: Fills the 0.2rem dead zone with an invisible hit-box */
+nav.site-nav .dropdown-content .dropdown:hover > .dropdown-content::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -0.3rem; /* Slightly larger than the margin to ensure overlap */
+  width: 0.3rem;
+  height: 100%;
+  background: transparent;
+}