diff --git a/app/assets/javascripts/super_sidebar/components/menu_section.vue b/app/assets/javascripts/super_sidebar/components/menu_section.vue
index 37a6ab0122be9882bd2e6910190f46604b655034..4e26750efc2a45dfbb51b5610fdbde4cb2d99973 100644
--- a/app/assets/javascripts/super_sidebar/components/menu_section.vue
+++ b/app/assets/javascripts/super_sidebar/components/menu_section.vue
@@ -43,6 +43,7 @@ export default {
       isExpanded: Boolean(this.expanded || this.item.is_active),
       isMouseOverSection: false,
       isMouseOverFlyout: false,
+      keepFlyoutClosed: false,
     };
   },
   computed: {
@@ -77,12 +78,17 @@ export default {
   watch: {
     isExpanded(newIsExpanded) {
       this.$emit('collapse-toggle', newIsExpanded);
+      this.keepFlyoutClosed = !this.newIsExpanded;
     },
   },
   methods: {
     handlePointerover(e) {
       this.isMouseOverSection = e.pointerType === 'mouse';
     },
+    handlePointerleave() {
+      this.isMouseOverSection = false;
+      this.keepFlyoutClosed = false;
+    },
   },
 };
 </script>
@@ -99,7 +105,7 @@ export default {
       v-bind="buttonProps"
       @click="isExpanded = !isExpanded"
       @pointerover="handlePointerover"
-      @pointerleave="isMouseOverSection = false"
+      @pointerleave="handlePointerleave"
     >
       <span
         :class="[isActive ? 'gl-bg-blue-500' : 'gl-bg-transparent']"
@@ -124,7 +130,7 @@ export default {
 
     <flyout-menu
       v-if="hasFlyout"
-      v-show="isMouseOver && !isExpanded"
+      v-show="isMouseOver && !isExpanded && !keepFlyoutClosed"
       :target-id="`menu-section-button-${itemId}`"
       :items="item.items"
       @mouseover="isMouseOverFlyout = true"
diff --git a/spec/frontend/super_sidebar/components/menu_section_spec.js b/spec/frontend/super_sidebar/components/menu_section_spec.js
index dd729d8fd6ad9479d7e301d7251152808cd6e39b..288e317d4c6e4f3d7130e036eabad2031c387f83 100644
--- a/spec/frontend/super_sidebar/components/menu_section_spec.js
+++ b/spec/frontend/super_sidebar/components/menu_section_spec.js
@@ -14,7 +14,7 @@ describe('MenuSection component', () => {
   const findNavItems = () => wrapper.findAllComponents(NavItem);
   const createWrapper = (item, otherProps) => {
     wrapper = shallowMountExtended(MenuSection, {
-      propsData: { item, ...otherProps },
+      propsData: { item: { items: [], ...item }, ...otherProps },
       stubs: {
         GlCollapse: stubComponent(GlCollapse, {
           props: ['visible'],
@@ -101,6 +101,25 @@ describe('MenuSection component', () => {
           });
         });
       });
+
+      describe('when section gets closed', () => {
+        beforeEach(async () => {
+          createWrapper({ title: 'Asdf' }, { expanded: true, 'has-flyout': true });
+          await findButton().trigger('click');
+          await findButton().trigger('pointerover', { pointerType: 'mouse' });
+        });
+
+        it('shows the flyout only after section title gets hovered out and in again', async () => {
+          expect(findCollapse().props('visible')).toBe(false);
+          expect(findFlyout().isVisible()).toBe(false);
+
+          await findButton().trigger('pointerleave');
+          await findButton().trigger('pointerover', { pointerType: 'mouse' });
+
+          expect(findCollapse().props('visible')).toBe(false);
+          expect(findFlyout().isVisible()).toBe(true);
+        });
+      });
     });
   });