diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
index cf1364f81f113c..8c553da22864c2 100644
--- a/packages/block-library/src/navigation-submenu/index.php
+++ b/packages/block-library/src/navigation-submenu/index.php
@@ -14,66 +14,6 @@
  * @param  bool  $is_sub_menu Whether the block is a sub-menu.
  * @return array Colors CSS classes and inline styles.
  */
-function block_core_navigation_submenu_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
-	$colors = array(
-		'css_classes'   => array(),
-		'inline_styles' => '',
-	);
-
-	// Text color.
-	$named_text_color  = null;
-	$custom_text_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayTextColor', $context ) ) {
-		$custom_text_color = $context['customOverlayTextColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayTextColor', $context ) ) {
-		$named_text_color = $context['overlayTextColor'];
-	} elseif ( array_key_exists( 'customTextColor', $context ) ) {
-		$custom_text_color = $context['customTextColor'];
-	} elseif ( array_key_exists( 'textColor', $context ) ) {
-		$named_text_color = $context['textColor'];
-	} elseif ( isset( $context['style']['color']['text'] ) ) {
-		$custom_text_color = $context['style']['color']['text'];
-	}
-
-	// If has text color.
-	if ( ! is_null( $named_text_color ) ) {
-		// Add the color class.
-		array_push( $colors['css_classes'], 'has-text-color', sprintf( 'has-%s-color', $named_text_color ) );
-	} elseif ( ! is_null( $custom_text_color ) ) {
-		// Add the custom color inline style.
-		$colors['css_classes'][]  = 'has-text-color';
-		$colors['inline_styles'] .= sprintf( 'color: %s;', $custom_text_color );
-	}
-
-	// Background color.
-	$named_background_color  = null;
-	$custom_background_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customOverlayBackgroundColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayBackgroundColor', $context ) ) {
-		$named_background_color = $context['overlayBackgroundColor'];
-	} elseif ( array_key_exists( 'customBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customBackgroundColor'];
-	} elseif ( array_key_exists( 'backgroundColor', $context ) ) {
-		$named_background_color = $context['backgroundColor'];
-	} elseif ( isset( $context['style']['color']['background'] ) ) {
-		$custom_background_color = $context['style']['color']['background'];
-	}
-
-	// If has background color.
-	if ( ! is_null( $named_background_color ) ) {
-		// Add the background-color class.
-		array_push( $colors['css_classes'], 'has-background', sprintf( 'has-%s-background-color', $named_background_color ) );
-	} elseif ( ! is_null( $custom_background_color ) ) {
-		// Add the custom background-color inline style.
-		$colors['css_classes'][]  = 'has-background';
-		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $custom_background_color );
-	}
-
-	return $colors;
-}
 
 /**
  * Build an array with CSS classes and inline styles defining the font sizes
@@ -129,7 +69,6 @@ function block_core_navigation_submenu_render_submenu_icon() {
  * @return string Returns the post content with the legacy widget added.
  */
 function render_block_core_navigation_submenu( $attributes, $content, $block ) {
-
 	$navigation_link_has_id = isset( $attributes['id'] ) && is_numeric( $attributes['id'] );
 	$is_post_type           = isset( $attributes['kind'] ) && 'post-type' === $attributes['kind'];
 	$is_post_type           = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] );
@@ -144,15 +83,10 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$colors          = block_core_navigation_submenu_build_css_colors( $block->context, $attributes );
 	$font_sizes      = block_core_navigation_submenu_build_css_font_sizes( $block->context );
-	$classes         = array_merge(
-		$colors['css_classes'],
-		$font_sizes['css_classes']
-	);
-	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$style_attribute = $font_sizes['inline_styles'];
 
-	$css_classes = trim( implode( ' ', $classes ) );
+	$css_classes = trim( implode( ' ', $font_sizes['css_classes'] ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
 	$is_active   = ! empty( $attributes['id'] ) && ( get_queried_object_id() === (int) $attributes['id'] );
 
@@ -249,14 +183,33 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	}
 
 	if ( $has_submenu ) {
-		$colors      = block_core_navigation_submenu_build_css_colors( $block->context, $attributes, $has_submenu );
-		$classes     = array_merge(
-			array( 'wp-block-navigation__submenu-container' ),
-			$colors['css_classes']
-		);
-		$css_classes = trim( implode( ' ', $classes ) );
+		// Copy some attributes from the parent block to this one.
+		// Ideally this would happen in the client when the block is created.
+		if ( array_key_exists( 'overlayTextColor', $block->context ) ) {
+			$attributes['textColor'] = $block->context['overlayTextColor'];
+		}
+		if ( array_key_exists( 'overlayBackgroundColor', $block->context ) ) {
+			$attributes['backgroundColor'] = $block->context['overlayBackgroundColor'];
+		}
+		if ( array_key_exists( 'customOverlayTextColor', $block->context ) ) {
+			$attributes['style']['color']['text'] = $block->context['customOverlayTextColor'];
+		}
+		if ( array_key_exists( 'customOverlayBackgroundColor', $block->context ) ) {
+			$attributes['style']['color']['background'] = $block->context['customOverlayBackgroundColor'];
+		}
 
-		$style_attribute = $colors['inline_styles'];
+		// This allows us to be able to get a response from gutenberg_apply_colors_support.
+		$block->block_type->supports['color'] = true;
+		$colors_supports                      = gutenberg_apply_colors_support( $block->block_type, $attributes );
+		$css_classes                          = 'wp-block-navigation__submenu-container';
+		if ( array_key_exists( 'class', $colors_supports ) ) {
+			$css_classes .= ' ' . $colors_supports['class'];
+		}
+
+		$style_attribute = '';
+		if ( array_key_exists( 'style', $colors_supports ) ) {
+			$style_attribute = $colors_supports['style'];
+		}
 
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_block ) {
diff --git a/phpunit/blocks/render-block-navigation-submenu-test.php b/phpunit/blocks/render-block-navigation-submenu-test.php
new file mode 100644
index 00000000000000..86ca34f5b997f8
--- /dev/null
+++ b/phpunit/blocks/render-block-navigation-submenu-test.php
@@ -0,0 +1,213 @@
+<?php
+/**
+ * Tests server side rendering of core/navigation-submenu
+ *
+ * @package    Gutenberg
+ * @subpackage block-library
+ */
+
+/**
+ * Tests for various cases in Navigation Submenu rendering
+ */
+class Render_Block_Navigation_Submenu_Test extends WP_UnitTestCase {
+	private static $category;
+	private static $page;
+	private static $draft;
+	private static $custom_draft;
+	private static $custom_post;
+
+
+	/**
+	 * @var array|null
+	 */
+	private $original_block_supports;
+
+	public static function set_up_before_class() {
+		self::$page = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'page',
+				'post_status'  => 'publish',
+				'post_name'    => 'tabby',
+				'post_title'   => 'Tabby cats',
+				'post_content' => 'Tabby cat content',
+				'post_excerpt' => 'Tabby cat',
+			)
+		);
+	}
+
+	public function set_up() {
+		parent::set_up();
+
+		$this->original_block_supports      = WP_Block_Supports::$block_to_render;
+		WP_Block_Supports::$block_to_render = array(
+			'attrs'     => array(),
+			'blockName' => '',
+		);
+	}
+
+	public function tear_down() {
+		WP_Block_Supports::$block_to_render = $this->original_block_supports;
+		parent::tear_down();
+	}
+
+	/**
+	 * @group submenu-color-inheritance
+	 * @covers ::gutenberg_render_block_core_navigation_submenu
+	 */
+	public function test_should_apply_preset_colors_inherited_from_parent_block_via_context() {
+		$page_id = self::$page->ID;
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:navigation-submenu {"label":"Submenu Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} -->
+            <!-- wp:navigation-link {"label":"Submenu Item Link Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} /-->
+        <!-- /wp:navigation-submenu -->'
+		);
+
+		$this->assertEquals( 1, count( $parsed_blocks ), 'Submenu block not parsable.' );
+
+		$block = $parsed_blocks[0];
+
+		// Colors inherited from parent Navigation block.
+		$context = array(
+			'overlayTextColor'       => 'purple',
+			'overlayBackgroundColor' => 'yellow',
+		);
+
+		$navigation_submenu_block = new WP_Block( $block, $context );
+
+		$rendered_html = gutenberg_render_block_core_navigation_submenu(
+			$navigation_submenu_block->attributes,
+			array(),
+			$navigation_submenu_block
+		);
+
+		$tags = new WP_HTML_Tag_Processor( $rendered_html );
+		$tags->next_tag(
+			array(
+				'tag_name'   => 'ul',
+				'class_name' => 'wp-block-navigation__submenu-container',
+			)
+		);
+		$tags->get_attribute( 'class' );
+
+		$this->assertEquals(
+			'wp-block-navigation__submenu-container has-text-color has-purple-color has-background has-yellow-background-color',
+			$tags->get_attribute( 'class' ),
+			'Submenu block colors inherited from context not applied correctly'
+		);
+	}
+
+	/**
+	 * @group submenu-color-inheritance
+	 * @covers ::gutenberg_render_block_core_navigation_submenu
+	 */
+	public function test_should_apply_custom_colors_inherited_from_parent_block_via_context() {
+		$page_id = self::$page->ID;
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:navigation-submenu {"label":"Submenu Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} -->
+            <!-- wp:navigation-link {"label":"Submenu Item Link Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} /-->
+        <!-- /wp:navigation-submenu -->'
+		);
+
+		$this->assertEquals( 1, count( $parsed_blocks ), 'Submenu block not parsable.' );
+
+		$block = $parsed_blocks[0];
+
+		// Colors inherited from parent Navigation block.
+		$context = array(
+			'customOverlayTextColor'       => '#BCC60A',
+			'customOverlayBackgroundColor' => '#E10E0E',
+		);
+
+		$navigation_submenu_block = new WP_Block( $block, $context );
+
+		$this->assertStringContainsString(
+			'<ul style="color:' . $context['customOverlayTextColor'] . ';background-color:' . $context['customOverlayBackgroundColor'] . ';" class="wp-block-navigation__submenu-container has-text-color has-background">',
+			gutenberg_render_block_core_navigation_submenu(
+				$navigation_submenu_block->attributes,
+				array(),
+				$navigation_submenu_block
+			),
+			'Submenu block colors inherited from context not applied correctly'
+		);
+	}
+
+	/**
+	 * @group submenu-color-inheritance
+	 * @covers ::gutenberg_render_block_core_navigation_submenu
+	 */
+	public function test_should_apply_mix_of_preset_and_custom_colors_inherited_from_parent_block_via_context() {
+		$page_id = self::$page->ID;
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:navigation-submenu {"label":"Submenu Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} -->
+            <!-- wp:navigation-link {"label":"Submenu Item Link Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} /-->
+        <!-- /wp:navigation-submenu -->'
+		);
+
+		$this->assertEquals( 1, count( $parsed_blocks ), 'Submenu block not parsable.' );
+
+		$block = $parsed_blocks[0];
+
+		// Colors inherited from parent Navigation block.
+		$context = array(
+			'overlayTextColor'             => 'purple',
+			'customOverlayBackgroundColor' => '#E10E0E',
+		);
+
+		$navigation_submenu_block = new WP_Block( $block, $context );
+
+		$this->assertStringContainsString(
+			'<ul style="background-color:' . $context['customOverlayBackgroundColor'] . ';" class="wp-block-navigation__submenu-container has-text-color has-' . $context['overlayTextColor'] . '-color has-background">',
+			gutenberg_render_block_core_navigation_submenu(
+				$navigation_submenu_block->attributes,
+				array(),
+				$navigation_submenu_block
+			),
+			'Submenu block colors inherited from context not applied correctly'
+		);
+	}
+
+	/**
+	 * @group submenu-color-inheritance
+	 * @covers ::gutenberg_render_block_core_navigation_submenu
+	 */
+	public function test_should_not_apply_custom_colors_if_missing_from_context() {
+		$page_id = self::$page->ID;
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:navigation-submenu {"label":"Submenu Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} -->
+            <!-- wp:navigation-link {"label":"Submenu Item Link Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} /-->
+        <!-- /wp:navigation-submenu -->'
+		);
+
+		$this->assertEquals( 1, count( $parsed_blocks ), 'Submenu block not parsable.' );
+
+		$block = $parsed_blocks[0];
+
+		// Intentionally empty - no colors.
+		$context = array();
+
+		$navigation_submenu_block = new WP_Block( $block, $context );
+
+		$actual = gutenberg_render_block_core_navigation_submenu(
+			$navigation_submenu_block->attributes,
+			array(),
+			$navigation_submenu_block
+		);
+
+		$this->assertStringContainsString(
+			'<ul class="wp-block-navigation__submenu-container">',
+			$actual,
+			'Submenu block should not apply colors if missing from context'
+		);
+
+		$this->assertStringNotContainsString(
+			$actual,
+			'has-text-color has-background',
+			'Submenu block should not apply "has-*" color classes if missing from context'
+		);
+
+	}
+}