diff --git a/CHANGELOG.md b/CHANGELOG.md
index b7a88cf14..2c0e41391 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## [next]
+
+* fix: The `MenuFlyoutSubItem` in the `DropDownButton` was not displaying when hovered or pressed. ([#964](https://github.com/bdlukaa/fluent_ui/pull/964))
+
 ## 4.8.1
 
 * feat: Added `NavigationPane.toggleable` ([#973](https://github.com/bdlukaa/fluent_ui/issues/973))
diff --git a/lib/src/controls/flyouts/menu.dart b/lib/src/controls/flyouts/menu.dart
index a9e6bc822..0803db26d 100644
--- a/lib/src/controls/flyouts/menu.dart
+++ b/lib/src/controls/flyouts/menu.dart
@@ -268,7 +268,10 @@ class MenuFlyoutItem extends MenuFlyoutItemBase {
           data: const IconThemeData(size: 12.0),
           child: trailing ?? const SizedBox.shrink(),
         ),
-        onPressed: onPressed,
+        onPressed: () {
+          onPressed?.call();
+          Navigator.maybePop(context);
+        },
       ),
     );
   }
diff --git a/lib/src/controls/inputs/dropdown_button.dart b/lib/src/controls/inputs/dropdown_button.dart
index 4624c51e4..e03b74be8 100644
--- a/lib/src/controls/inputs/dropdown_button.dart
+++ b/lib/src/controls/inputs/dropdown_button.dart
@@ -336,25 +336,53 @@ class DropDownButtonState extends State<DropDownButton> {
         return MenuFlyout(
           color: widget.menuColor,
           shape: widget.menuShape,
-          items: widget.items.map((item) {
-            if (widget.closeAfterClick && item is MenuFlyoutItem) {
-              return MenuFlyoutItem(
-                onPressed: () {
-                  Navigator.of(context).pop();
-                  item.onPressed?.call();
-                },
-                key: item.key,
-                leading: item.leading,
-                text: item.text,
-                trailing: item.trailing,
-                selected: item.selected,
-              );
-            }
-            return item;
-          }).toList(),
+          items:
+              widget.items.map((item) => transformItem(item, context)).toList(),
         );
       },
     );
     widget.onClose?.call();
   }
+
+  MenuFlyoutItemBase transformItem(
+    MenuFlyoutItemBase item,
+    BuildContext context,
+  ) {
+    if (item is MenuFlyoutSubItem) {
+      return _createSubMenuItem(item);
+    } else if (widget.closeAfterClick && item is MenuFlyoutItem) {
+      return _createMenuItem(item, context);
+    } else {
+      return item;
+    }
+  }
+
+  MenuFlyoutSubItem _createSubMenuItem(MenuFlyoutSubItem item) {
+    return MenuFlyoutSubItem(
+      key: item.key,
+      text: item.text,
+      items: (context) => item.items
+          .call(context)
+          .map((item) => transformItem(item, context))
+          .toList(),
+      leading: item.leading,
+      trailing: item.trailing,
+      showBehavior: item.showBehavior,
+      showHoverDelay: item.showHoverDelay,
+    );
+  }
+
+  MenuFlyoutItem _createMenuItem(MenuFlyoutItem item, BuildContext context) {
+    return MenuFlyoutItem(
+      onPressed: () {
+        Navigator.of(context).pop();
+        item.onPressed?.call();
+      },
+      key: item.key,
+      leading: item.leading,
+      text: item.text,
+      trailing: item.trailing,
+      selected: item.selected,
+    );
+  }
 }