diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
index aa15f913ddfa93..f614f90e628154 100644
--- a/packages/block-library/src/page-list/edit.js
+++ b/packages/block-library/src/page-list/edit.js
@@ -164,6 +164,30 @@ const PageItems = memo( function PageItems( {
 } ) {
 	const pages = pagesByParentId.get( parentId );
 	const frontPageId = useFrontPageId();
+	const isNavigationChild = 'showSubmenuIcon' in context;
+	const isSubmenuItem = depth > 0;
+
+	// User-set custom colors for the submenu needs to be added inline.
+	// If there are no user-set colors on the submenu,
+	// inherit the user-set colors from the navigation block.
+	const blockProps = useBlockProps();
+	const customSubmenuStyles = {
+		...blockProps.style,
+		color: !! context.customOverlayTextColor
+			? context.customOverlayTextColor
+			: context.customTextColor,
+		background: !! context.customOverlayBackgroundColor
+			? context.customOverlayBackgroundColor
+			: context.customBackgroundColor,
+	};
+
+	// If there is no overlay color set, inherit the color from the navigation block.
+	const textColor = !! context.overlayTextColor
+		? context.overlayTextColor
+		: context.textColor;
+	const backgroundColor = !! context.overlayBackgroundColor
+		? context.overlayBackgroundColor
+		: context.backgroundColor;
 
 	if ( ! pages?.length ) {
 		return [];
@@ -171,7 +195,6 @@ const PageItems = memo( function PageItems( {
 
 	return pages.map( ( page ) => {
 		const hasChildren = pagesByParentId.has( page.id );
-		const isNavigationChild = 'showSubmenuIcon' in context;
 		return (
 			<li
 				key={ page.id }
@@ -183,7 +206,30 @@ const PageItems = memo( function PageItems( {
 						! context.openSubmenusOnClick &&
 						context.showSubmenuIcon,
 					'menu-item-home': page.id === frontPageId,
+					'has-text-color':
+						( !! context.overlayTextColor && isSubmenuItem ) ||
+						( !! context.customOverlayTextColor &&
+							isSubmenuItem ) ||
+						( !! context.customTextColor && isSubmenuItem ) ||
+						( !! context.textColor && isSubmenuItem ),
+					[ getColorClassName( 'color', textColor ) ]:
+						!! textColor && isSubmenuItem,
+					'has-background':
+						!! (
+							context.overlayBackgroundColor && isSubmenuItem
+						) ||
+						!! (
+							context.customOverlayBackgroundColor &&
+							isSubmenuItem
+						) ||
+						!! ( context.backgroundColor && isSubmenuItem ) ||
+						!! ( context.customBackgroundColor && isSubmenuItem ),
+					[ getColorClassName(
+						'background-color',
+						backgroundColor
+					) ]: !! backgroundColor && isSubmenuItem,
 				} ) }
+				style={ !! isSubmenuItem ? customSubmenuStyles : undefined }
 			>
 				{ hasChildren && context.openSubmenusOnClick ? (
 					<>