diff --git a/src/wp-content/themes/twentytwenty/assets/js/index.js b/src/wp-content/themes/twentytwenty/assets/js/index.js
index 5daa9eaa7c..27f2f71b51 100644
--- a/src/wp-content/themes/twentytwenty/assets/js/index.js
+++ b/src/wp-content/themes/twentytwenty/assets/js/index.js
@@ -438,27 +438,51 @@ twentytwenty.primaryMenu = {
 
 		links = menu.getElementsByTagName( 'a' );
 
-		// Each time a menu link is focused or blurred, toggle focus.
+		// Each time a menu link is focused, update focus.
 		for ( i = 0, len = links.length; i < len; i++ ) {
-			links[i].addEventListener( 'focus', toggleFocus, true );
-			links[i].addEventListener( 'blur', toggleFocus, true );
+			links[i].addEventListener( 'focus', updateFocus, true );
 		}
 
-		//Sets or removes the .focus class on an element.
-		function toggleFocus() {
+		// Update focus class on an element.
+		function updateFocus() {
 			var self = this;
+			
+			// Remove focus from all li elements of primary-menu.
+			menu.querySelectorAll('li').forEach( function(el){
+				if(el.classList.contains('focus')){
+					el.classList.remove('focus');
+				}
+			})
+			
+			// Add focus to current a tag parent li.
+			self.parentElement.classList.add('focus');
 
-			// Move up through the ancestors of the current link until we hit .primary-menu.
-			while ( -1 === self.className.indexOf( 'primary-menu' ) ) {
-				// On li elements toggle the class .focus.
-				if ( 'li' === self.tagName.toLowerCase() ) {
-					if ( -1 !== self.className.indexOf( 'focus' ) ) {
-						self.className = self.className.replace( ' focus', '' );
-					} else {
-						self.className += ' focus';
-					}
+			// If current element is inside sub-menu find main parent li and add focus.
+			if(self.closest('.menu-item-has-children')) 
+				self.closest('.menu-item-has-children').classList.add('focus');
+
+		}
+
+		// Each time esc key is pressed while in menu, remove focus.
+		menu.addEventListener('keydown', removeFocusEsc, true);
+
+		// Remove focus when esc key pressed.
+		function removeFocusEsc(e){
+			e = e || window.event;
+			var isEscape = false;
+
+			// Find is pressed key is esc.
+			if ("key" in e) {
+				isEscape = (e.key === "Escape" || e.key === "Esc");
+			} else {
+				isEscape = (e.keyCode === 27);
+			}
+
+			// If pressed key is esc, remove focus class from main parent menu li.
+			if (isEscape) {
+				if(menu.querySelector('li.menu-item-has-children').classList.contains('focus')){
+					menu.querySelector('li.focus.menu-item-has-children').classList.remove('focus');
 				}
-				self = self.parentElement;
 			}
 		}
 	}
diff --git a/src/wp-content/themes/twentytwenty/style-rtl.css b/src/wp-content/themes/twentytwenty/style-rtl.css
index 3e2da9905c..628e78b8c5 100644
--- a/src/wp-content/themes/twentytwenty/style-rtl.css
+++ b/src/wp-content/themes/twentytwenty/style-rtl.css
@@ -1670,6 +1670,7 @@ ul.primary-menu {
 	transform: translateY(0.6rem);
 	width: 20rem;
 	z-index: 1;
+	visibility: hidden;
 }
 
 .primary-menu li.menu-item-has-children:hover > ul,
@@ -1679,6 +1680,7 @@ ul.primary-menu {
 	opacity: 1;
 	transform: translateY(0);
 	transition: opacity 0.15s linear, transform 0.15s linear;
+	visibility: visible;
 }
 
 .primary-menu ul::before,
diff --git a/src/wp-content/themes/twentytwenty/style.css b/src/wp-content/themes/twentytwenty/style.css
index 2fb031b375..a046713a67 100644
--- a/src/wp-content/themes/twentytwenty/style.css
+++ b/src/wp-content/themes/twentytwenty/style.css
@@ -1676,6 +1676,7 @@ ul.primary-menu {
 	transform: translateY(0.6rem);
 	width: 20rem;
 	z-index: 1;
+	visibility: hidden;
 }
 
 .primary-menu li.menu-item-has-children:hover > ul,
@@ -1685,6 +1686,7 @@ ul.primary-menu {
 	opacity: 1;
 	transform: translateY(0);
 	transition: opacity 0.15s linear, transform 0.15s linear;
+	visibility: visible;
 }
 
 .primary-menu ul::before,