diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
index dc3bc82410b..d1d210dadc7 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
@@ -177,7 +177,6 @@ export const KibanaExample: Story = {
                   { title: 'Notifications', href: '#' },
                 ],
               },
-              { title: 'Add data', href: '#' },
             ]),
           ]}
         />
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.ts
index 8dbe7c0dfe8..c8f7a3fc898 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.ts
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.ts
@@ -73,8 +73,17 @@ export const euiCollapsibleNavAccordionStyles = (
       }
     `,
     isSubItem: css`
-      &.euiAccordion-isOpen {
-        ${logicalCSS('margin-bottom', euiTheme.size.m)}
+      /* Adds extra spacing to the bottom of the accordion while open. Notes:
+         1. This uses a pseudo element instead of margin-bottom on the accordion,
+            because otherwise the height calculations the accordion uses will be off
+            and cause buggy animation behavior
+         2. Setting a margin or padding bottom on .euiAccordion__children does not
+            seem to work correctly and gets collapsed instead of stacking
+       */
+      &.euiAccordion-isOpen .euiAccordion__children::after {
+        content: '';
+        display: block;
+        ${logicalCSS('height', euiTheme.size.m)}
       }
     `,
     // Arrow element