diff --git a/src/uix/eidos/components/navigation-menu/navigation-menu.css b/src/uix/eidos/components/navigation-menu/navigation-menu.css
index f3efee413..21189367b 100644
--- a/src/uix/eidos/components/navigation-menu/navigation-menu.css
+++ b/src/uix/eidos/components/navigation-menu/navigation-menu.css
@@ -63,11 +63,17 @@
 	align-items: stretch;
 }
 
-/* ── Item ─ */
+/* ── Item ─
+ *
+ * `position: relative` makes the Item the positioning anchor for its
+ * Content panel — Content is `position: absolute` below so opening it
+ * doesn't push the bar. The Item only lays out its Trigger / Link
+ * inline.
+ */
 [data-navigation-menu-item] {
 	position: relative;
 	display: inline-flex;
-	flex-direction: column;
+	align-items: center;
 }
 
 /* ── Trigger (and Link share the same in-bar chrome) ─ */
@@ -147,6 +153,16 @@
  * directional slide animation per `data-motion` (from / to).
  */
 [data-navigation-menu-content] {
+	/* Floats below the parent Item — taken out of the bar's flex flow so
+	 * opening the mega-menu doesn't push siblings. `top: 100%` anchors
+	 * it just below the trigger row; `inset-inline-start: 0` left-aligns
+	 * to the Item, but the panel itself has a `min-inline-size` so it
+	 * extends past the trigger if needed. */
+	position: absolute;
+	inset-block-start: calc(100% + var(--space-1));
+	inset-inline-start: 0;
+	z-index: 50;
+
 	min-inline-size: 14rem;
 	padding: var(--space-4);
 	border: 1px solid var(--color-border-default);
@@ -157,6 +173,13 @@
 	outline: none;
 }
 
+/* Vertical orientation flips the anchor — Content opens to the right
+ * of the trigger column instead of below. */
+[data-navigation-menu][data-orientation='vertical'] [data-navigation-menu-content] {
+	inset-block-start: 0;
+	inset-inline-start: calc(100% + var(--space-1));
+}
+
 [data-navigation-menu-content][data-state='open'] {
 	animation: navigation-menu-enter var(--duration-fast) var(--ease-out);
 }