diff --git a/src/uix/eidos/components/navigation-menu/navigation-menu.css b/src/uix/eidos/components/navigation-menu/navigation-menu.css
index 21189367b..7dc1a30ce 100644
--- a/src/uix/eidos/components/navigation-menu/navigation-menu.css
+++ b/src/uix/eidos/components/navigation-menu/navigation-menu.css
@@ -164,7 +164,7 @@
 	z-index: 50;
 
 	min-inline-size: 14rem;
-	padding: var(--space-4);
+	padding: var(--space-2);
 	border: 1px solid var(--color-border-default);
 	border-radius: var(--radius-lg);
 	background: var(--color-surface-overlay);
@@ -173,6 +173,48 @@
 	outline: none;
 }
 
+/* ── Content sub-items ──────────────────────────────────────────────────
+ *
+ * Consumers compose mega-menu contents with `<a>` (or
+ * `<NavigationMenu.Link>` — which already emits `[data-navigation-menu-link]`
+ * + matches this rule too). The recipe gives anchors inside Content a
+ * default row treatment: padding, rounded hover background, focus ring.
+ * Override by adding more specific selectors per-consumer.
+ *
+ * `> a` and `> [data-navigation-menu-link]` keep the rule shallow so
+ * nested layout wrappers don't accidentally pick it up; if you wrap your
+ * items in a grid/flex container, target its direct children too:
+ *   `[data-navigation-menu-content] :is(a, [data-navigation-menu-link])`.
+ */
+[data-navigation-menu-content] :is(a, [data-navigation-menu-link]) {
+	display: block;
+	padding-block: var(--space-2);
+	padding-inline: var(--space-3);
+	border-radius: var(--radius-md);
+	color: var(--color-content-primary);
+	text-decoration: none;
+	cursor: pointer;
+	outline: none;
+	transition:
+		background var(--duration-fast) var(--ease-default),
+		color var(--duration-fast) var(--ease-default);
+}
+
+[data-navigation-menu-content] :is(a, [data-navigation-menu-link]):hover {
+	background: var(--color-primary-element);
+	color: var(--color-content-primary);
+}
+
+[data-navigation-menu-content] :is(a, [data-navigation-menu-link]):focus-visible {
+	outline: var(--focus-ring-width) solid var(--focus-ring-color);
+	outline-offset: 1px;
+}
+
+[data-navigation-menu-content] :is(a, [data-navigation-menu-link])[aria-current='page'],
+[data-navigation-menu-content] :is(a, [data-navigation-menu-link])[data-active] {
+	background: var(--color-primary-element);
+}
+
 /* 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] {
diff --git a/web/routes/uix/components/navigation-menu/+page.svelte b/web/routes/uix/components/navigation-menu/+page.svelte
index f3535728a..07f32eb68 100644
--- a/web/routes/uix/components/navigation-menu/+page.svelte
+++ b/web/routes/uix/components/navigation-menu/+page.svelte
@@ -138,20 +138,20 @@
 					<NavigationMenu.Item value="products">
 						<NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
 						<NavigationMenu.Content>
-							<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uix-space-3); min-inline-size: 24rem;">
-								<a href="#" style="color: inherit; text-decoration: none;">
+							<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uix-space-1); min-inline-size: 24rem;">
+								<a href="#">
 									<strong style="display: block;">Analytics</strong>
 									<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Real-time insights from your data.</span>
 								</a>
-								<a href="#" style="color: inherit; text-decoration: none;">
+								<a href="#">
 									<strong style="display: block;">Workflows</strong>
 									<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Automate repeating tasks.</span>
 								</a>
-								<a href="#" style="color: inherit; text-decoration: none;">
+								<a href="#">
 									<strong style="display: block;">Integrations</strong>
 									<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Connect to your favourite tools.</span>
 								</a>
-								<a href="#" style="color: inherit; text-decoration: none;">
+								<a href="#">
 									<strong style="display: block;">API</strong>
 									<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Build on the platform.</span>
 								</a>
@@ -163,10 +163,10 @@
 						<NavigationMenu.Trigger>Solutions</NavigationMenu.Trigger>
 						<NavigationMenu.Content>
 							<div style="display: flex; flex-direction: column; gap: var(--uix-space-2); min-inline-size: 18rem;">
-								<a href="#" style="color: inherit; text-decoration: none;">For startups</a>
-								<a href="#" style="color: inherit; text-decoration: none;">For enterprise</a>
-								<a href="#" style="color: inherit; text-decoration: none;">For agencies</a>
-								<a href="#" style="color: inherit; text-decoration: none;">For non-profits</a>
+								<a href="#">For startups</a>
+								<a href="#">For enterprise</a>
+								<a href="#">For agencies</a>
+								<a href="#">For non-profits</a>
 							</div>
 						</NavigationMenu.Content>
 					</NavigationMenu.Item>