diff --git a/client/src/controllers/DrilldownController.ts b/client/src/controllers/DrilldownController.ts
index 633ffe0fbc..80467e16dd 100644
--- a/client/src/controllers/DrilldownController.ts
+++ b/client/src/controllers/DrilldownController.ts
@@ -57,6 +57,16 @@ export class DrilldownController extends Controller<HTMLElement> {
     this.activeSubmenuValue = '';
   }
 
+  /**
+   * Delay closing the submenu to allow the top-level menu to fade out first.
+   * Useful for resetting the state when the user clicks outside the menu.
+   * This can be used as an action for the w-dropdown:hidden event of the menu,
+   * e.g. data-action="w-dropdown:hidden->w-drilldown#delayedClose".
+   */
+  delayedClose() {
+    setTimeout(() => this.close(), 200);
+  }
+
   /**
    * Derive the component’s targets based on the state,
    * so the drilldown state can be controlled externally more easily.
diff --git a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
index a1875c483d..7edb9936e9 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
@@ -79,7 +79,7 @@
                         {% endif %}
 
                         {% if filters %}
-                            <div id="filters-drilldown" class="w-drilldown" data-controller="w-drilldown" data-action="w-swap:success@document->w-drilldown#updateParamsCount">
+                            <div id="filters-drilldown" class="w-drilldown" data-controller="w-drilldown" data-action="w-swap:success@document->w-drilldown#updateParamsCount w-dropdown:hide->w-drilldown#delayedClose">
                                 {% include "wagtailadmin/shared/headers/_filters.html" with filters=filters only %}
                             </div>
                         {% endif %}