fix(docs): bridge nav-dropdown hover gap with ::after pseudo-element

The 8px gap between the Examples label and the dropdown menu caused
hover to drop as the mouse crossed from the label to the menu items.
A position:absolute ::after pseudo-element on .nav-dropdown now fills
that gap, keeping :hover active throughout the transition.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: fsecada01

docs/site-pages/admin-panel.html

@@ -505,6 +505,14 @@
       box-shadow: 0 8px 24px rgba(0,0,0,0.4);
     }
     .nav-dropdown:hover .nav-dropdown__menu { display: block; }
+    .nav-dropdown::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: -1rem;
+      right: -1rem;
+      height: 10px;
+    }
     .nav-dropdown__menu li a {
       display: block; padding: 0.4rem 1rem;
       font-size: 13px; font-family: var(--mono); color: var(--text);

docs/site-pages/customer-support.html

@@ -505,6 +505,14 @@
       box-shadow: 0 8px 24px rgba(0,0,0,0.4);
     }
     .nav-dropdown:hover .nav-dropdown__menu { display: block; }
+    .nav-dropdown::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: -1rem;
+      right: -1rem;
+      height: 10px;
+    }
     .nav-dropdown__menu li a {
       display: block; padding: 0.4rem 1rem;
       font-size: 13px; font-family: var(--mono); color: var(--text);

docs/site-pages/ecommerce.html

@@ -516,6 +516,14 @@
       box-shadow: 0 8px 32px rgba(0,0,0,0.45);
     }
     .nav-dropdown:hover .nav-dropdown__menu { display: block; }
+    .nav-dropdown::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: -1rem;
+      right: -1rem;
+      height: 10px;
+    }
     .nav-dropdown__menu a {
       display: block;
       font-family: var(--mono);

docs/site-pages/education-lms.html

@@ -516,6 +516,14 @@
       box-shadow: 0 8px 32px rgba(0,0,0,0.45);
     }
     .nav-dropdown:hover .nav-dropdown__menu { display: block; }
+    .nav-dropdown::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: -1rem;
+      right: -1rem;
+      height: 10px;
+    }
     .nav-dropdown__menu a {
       display: block;
       font-family: var(--mono);

docs/site-pages/financial-dashboard.html

@@ -516,6 +516,14 @@
       box-shadow: 0 8px 32px rgba(0,0,0,0.45);
     }
     .nav-dropdown:hover .nav-dropdown__menu { display: block; }
+    .nav-dropdown::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: -1rem;
+      right: -1rem;
+      height: 10px;
+    }
     .nav-dropdown__menu a {
       display: block;
       font-family: var(--mono);

docs/site-pages/index.html

@@ -594,6 +594,14 @@
       box-shadow: 0 8px 32px rgba(0,0,0,0.45);
     }
     .nav-dropdown:hover .nav-dropdown__menu { display: block; }
+    .nav-dropdown::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: -1rem;
+      right: -1rem;
+      height: 10px;
+    }
     .nav-dropdown__menu a {
       display: block;
       font-family: var(--mono);