Fixed submenu style of focused submenu to match hover styling (#5221)

alves/sass/_extra-child-theme.scss

@@ -266,12 +266,9 @@ body:not(.fse-enabled) {
 			}
 
 			& > div > ul > li:hover,
-			& > div > ul > li.focus,
+			& > div > ul > li:focus-within,
 			& > div > ul > li.current-menu-item {
 
-				& > a {
-				}
-
 				& > ul {
 					box-shadow: none;
 					overflow: hidden;
@@ -286,17 +283,6 @@ body:not(.fse-enabled) {
 						width: #{map-deep-get($config-global, "spacing", "unit")};
 					}
 				}
-
-				& li {
-
-					& > a {
-					}
-
-					&:hover > a,
-					&.focus > a,
-					&.current-menu-item > a {
-					}
-				}
 			}
 		}
 

alves/style-rtl.css

@@ -4290,13 +4290,30 @@ body:not(.fse-enabled) #masthead {
 		font-size: 0.625rem;
 	}
 	.site-header .main-navigation > div > ul > li:hover > ul,
-	.site-header .main-navigation > div > ul > li.focus > ul,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
 	}
+	.site-header .main-navigation > div > ul > li:hover > ul,
+	.site-header .main-navigation > div > ul > li:focus-within > ul,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
+		box-shadow: none;
+		overflow: hidden;
+	}
+	.site-header .main-navigation > div > ul > li:hover > ul:before,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul:before,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
+		border-bottom: 8px solid #3E7D98;
+		border-right: 8px solid transparent;
+		border-left: 8px solid transparent;
+		content: "";
+		display: block;
+		margin-right: 16px;
+		width: 16px;
+	}
 	.site-header .main-navigation > div > ul > li:hover > ul:before,
-	.site-header .main-navigation > div > ul > li.focus > ul:before,
+	.site-header .main-navigation > div > ul > li:focus-within > ul:before,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
 		border-bottom: 8px solid #3E7D98;
 		border-right: 8px solid transparent;

alves/style.css

@@ -4319,13 +4319,30 @@ body:not(.fse-enabled) #masthead {
 		font-size: 0.625rem;
 	}
 	.site-header .main-navigation > div > ul > li:hover > ul,
-	.site-header .main-navigation > div > ul > li.focus > ul,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
 	}
+	.site-header .main-navigation > div > ul > li:hover > ul,
+	.site-header .main-navigation > div > ul > li:focus-within > ul,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
+		box-shadow: none;
+		overflow: hidden;
+	}
+	.site-header .main-navigation > div > ul > li:hover > ul:before,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul:before,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
+		border-bottom: 8px solid #3E7D98;
+		border-left: 8px solid transparent;
+		border-right: 8px solid transparent;
+		content: "";
+		display: block;
+		margin-left: 16px;
+		width: 16px;
+	}
 	.site-header .main-navigation > div > ul > li:hover > ul:before,
-	.site-header .main-navigation > div > ul > li.focus > ul:before,
+	.site-header .main-navigation > div > ul > li:focus-within > ul:before,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
 		border-bottom: 8px solid #3E7D98;
 		border-left: 8px solid transparent;

balasana/sass/_extra-child-theme.scss

@@ -176,7 +176,7 @@ dt {
 		}
 
 		& > div > ul > li:hover,
-		& > div > ul > li.focus,
+		& > div > ul > li:focus-within,
 		& > div > ul > li.current-menu-item {
 
 			& > ul {

balasana/style-rtl.css

@@ -4245,7 +4245,15 @@ dt {
 		vertical-align: middle;
 	}
 	.main-navigation > div > ul > li:hover > ul,
-	.main-navigation > div > ul > li.focus > ul,
+	.main-navigation > div > ul > li[focus-within] > ul,
+	.main-navigation > div > ul > li.current-menu-item > ul {
+		border: 1px solid #D0D0D0;
+		border-radius: 4px;
+		box-shadow: none;
+		overflow: hidden;
+	}
+	.main-navigation > div > ul > li:hover > ul,
+	.main-navigation > div > ul > li:focus-within > ul,
 	.main-navigation > div > ul > li.current-menu-item > ul {
 		border: 1px solid #D0D0D0;
 		border-radius: 4px;

balasana/style.css

@@ -4274,7 +4274,15 @@ dt {
 		vertical-align: middle;
 	}
 	.main-navigation > div > ul > li:hover > ul,
-	.main-navigation > div > ul > li.focus > ul,
+	.main-navigation > div > ul > li[focus-within] > ul,
+	.main-navigation > div > ul > li.current-menu-item > ul {
+		border: 1px solid #D0D0D0;
+		border-radius: 4px;
+		box-shadow: none;
+		overflow: hidden;
+	}
+	.main-navigation > div > ul > li:hover > ul,
+	.main-navigation > div > ul > li:focus-within > ul,
 	.main-navigation > div > ul > li.current-menu-item > ul {
 		border: 1px solid #D0D0D0;
 		border-radius: 4px;

barnsbury/sass/_extra-child-theme.scss

@@ -124,7 +124,7 @@ a {
 		}
 
 		& > div > ul > li:hover,
-		& > div > ul > li.focus,
+		& > div > ul > li:focus-within,
 		& > div > ul > li.current-menu-item {
 
 			& > a {

barnsbury/style-rtl.css

@@ -4177,18 +4177,40 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		font-size: 0.5rem;
 	}
 	.main-navigation > div > ul > li:hover > a,
-	.main-navigation > div > ul > li.focus > a,
+	.main-navigation > div > ul > li[focus-within] > a,
 	.main-navigation > div > ul > li.current-menu-item > a {
 		color: #20603C;
 	}
+	.main-navigation > div > ul > li:hover > a,
+	.main-navigation > div > ul > li:focus-within > a,
+	.main-navigation > div > ul > li.current-menu-item > a {
+		color: #20603C;
+	}
+	.main-navigation > div > ul > li:hover > ul,
+	.main-navigation > div > ul > li[focus-within] > ul,
+	.main-navigation > div > ul > li.current-menu-item > ul {
+		box-shadow: none;
+		overflow: hidden;
+	}
 	.main-navigation > div > ul > li:hover > ul,
-	.main-navigation > div > ul > li.focus > ul,
+	.main-navigation > div > ul > li:focus-within > ul,
 	.main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
 	}
 	.main-navigation > div > ul > li:hover > ul:before,
-	.main-navigation > div > ul > li.focus > ul:before,
+	.main-navigation > div > ul > li[focus-within] > ul:before,
+	.main-navigation > div > ul > li.current-menu-item > ul:before {
+		border-bottom: 8px solid #20603C;
+		border-right: 8px solid transparent;
+		border-left: 8px solid transparent;
+		content: "";
+		display: block;
+		margin-right: 16px;
+		width: 16px;
+	}
+	.main-navigation > div > ul > li:hover > ul:before,
+	.main-navigation > div > ul > li:focus-within > ul:before,
 	.main-navigation > div > ul > li.current-menu-item > ul:before {
 		border-bottom: 8px solid #20603C;
 		border-right: 8px solid transparent;
@@ -4199,7 +4221,13 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		width: 16px;
 	}
 	.main-navigation > div > ul > li:hover li > a,
-	.main-navigation > div > ul > li.focus li > a,
+	.main-navigation > div > ul > li[focus-within] li > a,
+	.main-navigation > div > ul > li.current-menu-item li > a {
+		background: #20603C;
+		color: #FFFDF6;
+	}
+	.main-navigation > div > ul > li:hover li > a,
+	.main-navigation > div > ul > li:focus-within li > a,
 	.main-navigation > div > ul > li.current-menu-item li > a {
 		background: #20603C;
 		color: #FFFDF6;
@@ -4207,9 +4235,20 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	.main-navigation > div > ul > li:hover li:hover > a,
 	.main-navigation > div > ul > li:hover li.focus > a,
 	.main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.main-navigation > div > ul > li.focus li:hover > a,
-	.main-navigation > div > ul > li.focus li.focus > a,
-	.main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.main-navigation > div > ul > li[focus-within] li:hover > a,
+	.main-navigation > div > ul > li[focus-within] li.focus > a,
+	.main-navigation > div > ul > li[focus-within] li.current-menu-item > a,
+	.main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+		background: #133a24;
+	}
+	.main-navigation > div > ul > li:hover li:hover > a,
+	.main-navigation > div > ul > li:hover li.focus > a,
+	.main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.main-navigation > div > ul > li:focus-within li:hover > a,
+	.main-navigation > div > ul > li:focus-within li.focus > a,
+	.main-navigation > div > ul > li:focus-within li.current-menu-item > a,
 	.main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {

barnsbury/style.css

@@ -4206,18 +4206,40 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		font-size: 0.5rem;
 	}
 	.main-navigation > div > ul > li:hover > a,
-	.main-navigation > div > ul > li.focus > a,
+	.main-navigation > div > ul > li[focus-within] > a,
 	.main-navigation > div > ul > li.current-menu-item > a {
 		color: #20603C;
 	}
+	.main-navigation > div > ul > li:hover > a,
+	.main-navigation > div > ul > li:focus-within > a,
+	.main-navigation > div > ul > li.current-menu-item > a {
+		color: #20603C;
+	}
+	.main-navigation > div > ul > li:hover > ul,
+	.main-navigation > div > ul > li[focus-within] > ul,
+	.main-navigation > div > ul > li.current-menu-item > ul {
+		box-shadow: none;
+		overflow: hidden;
+	}
 	.main-navigation > div > ul > li:hover > ul,
-	.main-navigation > div > ul > li.focus > ul,
+	.main-navigation > div > ul > li:focus-within > ul,
 	.main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
 	}
 	.main-navigation > div > ul > li:hover > ul:before,
-	.main-navigation > div > ul > li.focus > ul:before,
+	.main-navigation > div > ul > li[focus-within] > ul:before,
+	.main-navigation > div > ul > li.current-menu-item > ul:before {
+		border-bottom: 8px solid #20603C;
+		border-left: 8px solid transparent;
+		border-right: 8px solid transparent;
+		content: "";
+		display: block;
+		margin-left: 16px;
+		width: 16px;
+	}
+	.main-navigation > div > ul > li:hover > ul:before,
+	.main-navigation > div > ul > li:focus-within > ul:before,
 	.main-navigation > div > ul > li.current-menu-item > ul:before {
 		border-bottom: 8px solid #20603C;
 		border-left: 8px solid transparent;
@@ -4228,7 +4250,13 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		width: 16px;
 	}
 	.main-navigation > div > ul > li:hover li > a,
-	.main-navigation > div > ul > li.focus li > a,
+	.main-navigation > div > ul > li[focus-within] li > a,
+	.main-navigation > div > ul > li.current-menu-item li > a {
+		background: #20603C;
+		color: #FFFDF6;
+	}
+	.main-navigation > div > ul > li:hover li > a,
+	.main-navigation > div > ul > li:focus-within li > a,
 	.main-navigation > div > ul > li.current-menu-item li > a {
 		background: #20603C;
 		color: #FFFDF6;
@@ -4236,9 +4264,20 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	.main-navigation > div > ul > li:hover li:hover > a,
 	.main-navigation > div > ul > li:hover li.focus > a,
 	.main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.main-navigation > div > ul > li.focus li:hover > a,
-	.main-navigation > div > ul > li.focus li.focus > a,
-	.main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.main-navigation > div > ul > li[focus-within] li:hover > a,
+	.main-navigation > div > ul > li[focus-within] li.focus > a,
+	.main-navigation > div > ul > li[focus-within] li.current-menu-item > a,
+	.main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+		background: #133a24;
+	}
+	.main-navigation > div > ul > li:hover li:hover > a,
+	.main-navigation > div > ul > li:hover li.focus > a,
+	.main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.main-navigation > div > ul > li:focus-within li:hover > a,
+	.main-navigation > div > ul > li:focus-within li.focus > a,
+	.main-navigation > div > ul > li:focus-within li.current-menu-item > a,
 	.main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {

brompton/sass/_extra-child-theme.scss

@@ -171,7 +171,7 @@
 		}
 
 		& > div > ul > li:hover,
-		& > div > ul > li.focus,
+		& > div > ul > li:focus-within,
 		& > div > ul > li.current-menu-item {
 
 			& > ul {

brompton/style-rtl.css

@@ -4233,13 +4233,25 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		background: #252E36;
 	}
 	.main-navigation > div > ul > li:hover > ul,
-	.main-navigation > div > ul > li.focus > ul,
+	.main-navigation > div > ul > li[focus-within] > ul,
 	.main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
 	}
+	.main-navigation > div > ul > li:hover > ul,
+	.main-navigation > div > ul > li:focus-within > ul,
+	.main-navigation > div > ul > li.current-menu-item > ul {
+		box-shadow: none;
+		overflow: hidden;
+	}
+	.main-navigation > div > ul > li:hover li > a,
+	.main-navigation > div > ul > li[focus-within] li > a,
+	.main-navigation > div > ul > li.current-menu-item li > a {
+		background: #252E36;
+		border-top: 1px solid rgba(255, 255, 255, 0.5);
+	}
 	.main-navigation > div > ul > li:hover li > a,
-	.main-navigation > div > ul > li.focus li > a,
+	.main-navigation > div > ul > li:focus-within li > a,
 	.main-navigation > div > ul > li.current-menu-item li > a {
 		background: #252E36;
 		border-top: 1px solid rgba(255, 255, 255, 0.5);

brompton/style.css

@@ -4262,13 +4262,25 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		background: #252E36;
 	}
 	.main-navigation > div > ul > li:hover > ul,
-	.main-navigation > div > ul > li.focus > ul,
+	.main-navigation > div > ul > li[focus-within] > ul,
 	.main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
 	}
+	.main-navigation > div > ul > li:hover > ul,
+	.main-navigation > div > ul > li:focus-within > ul,
+	.main-navigation > div > ul > li.current-menu-item > ul {
+		box-shadow: none;
+		overflow: hidden;
+	}
+	.main-navigation > div > ul > li:hover li > a,
+	.main-navigation > div > ul > li[focus-within] li > a,
+	.main-navigation > div > ul > li.current-menu-item li > a {
+		background: #252E36;
+		border-top: 1px solid rgba(255, 255, 255, 0.5);
+	}
 	.main-navigation > div > ul > li:hover li > a,
-	.main-navigation > div > ul > li.focus li > a,
+	.main-navigation > div > ul > li:focus-within li > a,
 	.main-navigation > div > ul > li.current-menu-item li > a {
 		background: #252E36;
 		border-top: 1px solid rgba(255, 255, 255, 0.5);

dalston/sass/_extra-child-theme.scss

@@ -112,7 +112,7 @@ a {
 			}
 
 			& > div > ul > li:hover,
-			& > div > ul > li.focus,
+			& > div > ul > li:focus-within,
 			& > div > ul > li.current-menu-item {
 
 				& > ul {

dalston/style-rtl.css

@@ -4174,13 +4174,30 @@ a {
 		font-size: 0.5rem;
 	}
 	.site-header .main-navigation > div > ul > li:hover > ul,
-	.site-header .main-navigation > div > ul > li.focus > ul,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
 	}
+	.site-header .main-navigation > div > ul > li:hover > ul,
+	.site-header .main-navigation > div > ul > li:focus-within > ul,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
+		box-shadow: none;
+		overflow: hidden;
+	}
+	.site-header .main-navigation > div > ul > li:hover > ul:before,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul:before,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
+		border-bottom: 8px solid #0073AA;
+		border-right: 8px solid transparent;
+		border-left: 8px solid transparent;
+		content: "";
+		display: block;
+		margin-right: 16px;
+		width: 16px;
+	}
 	.site-header .main-navigation > div > ul > li:hover > ul:before,
-	.site-header .main-navigation > div > ul > li.focus > ul:before,
+	.site-header .main-navigation > div > ul > li:focus-within > ul:before,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
 		border-bottom: 8px solid #0073AA;
 		border-right: 8px solid transparent;
@@ -4191,17 +4208,34 @@ a {
 		width: 16px;
 	}
 	.site-header .main-navigation > div > ul > li:hover li > a,
-	.site-header .main-navigation > div > ul > li.focus li > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
 		background: #0073AA;
 		color: #FFFFFF;
 	}
+	.site-header .main-navigation > div > ul > li:hover li > a,
+	.site-header .main-navigation > div > ul > li:focus-within li > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
+		background: #0073AA;
+		color: #FFFFFF;
+	}
+	.site-header .main-navigation > div > ul > li:hover li:hover > a,
+	.site-header .main-navigation > div > ul > li:hover li.focus > a,
+	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li:hover > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li.focus > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+		background: #005177;
+	}
 	.site-header .main-navigation > div > ul > li:hover li:hover > a,
 	.site-header .main-navigation > div > ul > li:hover li.focus > a,
 	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.site-header .main-navigation > div > ul > li.focus li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus li.focus > a,
-	.site-header .main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li:focus-within li:hover > a,
+	.site-header .main-navigation > div > ul > li:focus-within li.focus > a,
+	.site-header .main-navigation > div > ul > li:focus-within li.current-menu-item > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {

dalston/style.css

@@ -4203,13 +4203,30 @@ a {
 		font-size: 0.5rem;
 	}
 	.site-header .main-navigation > div > ul > li:hover > ul,
-	.site-header .main-navigation > div > ul > li.focus > ul,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
 	}
+	.site-header .main-navigation > div > ul > li:hover > ul,
+	.site-header .main-navigation > div > ul > li:focus-within > ul,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
+		box-shadow: none;
+		overflow: hidden;
+	}
+	.site-header .main-navigation > div > ul > li:hover > ul:before,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul:before,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
+		border-bottom: 8px solid #0073AA;
+		border-left: 8px solid transparent;
+		border-right: 8px solid transparent;
+		content: "";
+		display: block;
+		margin-left: 16px;
+		width: 16px;
+	}
 	.site-header .main-navigation > div > ul > li:hover > ul:before,
-	.site-header .main-navigation > div > ul > li.focus > ul:before,
+	.site-header .main-navigation > div > ul > li:focus-within > ul:before,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
 		border-bottom: 8px solid #0073AA;
 		border-left: 8px solid transparent;
@@ -4220,17 +4237,34 @@ a {
 		width: 16px;
 	}
 	.site-header .main-navigation > div > ul > li:hover li > a,
-	.site-header .main-navigation > div > ul > li.focus li > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
 		background: #0073AA;
 		color: #FFFFFF;
 	}
+	.site-header .main-navigation > div > ul > li:hover li > a,
+	.site-header .main-navigation > div > ul > li:focus-within li > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
+		background: #0073AA;
+		color: #FFFFFF;
+	}
+	.site-header .main-navigation > div > ul > li:hover li:hover > a,
+	.site-header .main-navigation > div > ul > li:hover li.focus > a,
+	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li:hover > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li.focus > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+		background: #005177;
+	}
 	.site-header .main-navigation > div > ul > li:hover li:hover > a,
 	.site-header .main-navigation > div > ul > li:hover li.focus > a,
 	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.site-header .main-navigation > div > ul > li.focus li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus li.focus > a,
-	.site-header .main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li:focus-within li:hover > a,
+	.site-header .main-navigation > div > ul > li:focus-within li.focus > a,
+	.site-header .main-navigation > div > ul > li:focus-within li.current-menu-item > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {

hever/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "hever",
-  "version": "1.5.12",
+  "version": "1.5.13",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

hever/sass/_extra-child-theme.scss

@@ -131,7 +131,7 @@ body:not(.fse-enabled) {
 			}
 
 			& > div > ul > li:hover,
-			& > div > ul > li.focus,
+			& > div > ul > li:focus-within,
 			& > div > ul > li.current-menu-item {
 
 				& > a {

hever/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A fully responsive theme, ideal for creating a strong — yet beautiful — online presence for your business.
 Requires at least: WordPress 4.9.6
-Version: 1.5.12
+Version: 1.5.13
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4235,18 +4235,40 @@ body:not(.fse-enabled) #colophon {
 		font-size: 0.5rem;
 	}
 	.site-header .main-navigation > div > ul > li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus > a,
+	.site-header .main-navigation > div > ul > li[focus-within] > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item > a {
 		color: var(--wp--preset--color--primary);
 	}
+	.site-header .main-navigation > div > ul > li:hover > a,
+	.site-header .main-navigation > div > ul > li:focus-within > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item > a {
+		color: var(--wp--preset--color--primary);
+	}
+	.site-header .main-navigation > div > ul > li:hover > ul,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
+		box-shadow: none;
+		overflow: hidden;
+	}
 	.site-header .main-navigation > div > ul > li:hover > ul,
-	.site-header .main-navigation > div > ul > li.focus > ul,
+	.site-header .main-navigation > div > ul > li:focus-within > ul,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
 	}
 	.site-header .main-navigation > div > ul > li:hover > ul:before,
-	.site-header .main-navigation > div > ul > li.focus > ul:before,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul:before,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
+		border-bottom: 8px solid var(--wp--preset--color--primary);
+		border-right: 8px solid transparent;
+		border-left: 8px solid transparent;
+		content: "";
+		display: block;
+		margin-right: 16px;
+		width: 16px;
+	}
+	.site-header .main-navigation > div > ul > li:hover > ul:before,
+	.site-header .main-navigation > div > ul > li:focus-within > ul:before,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
 		border-bottom: 8px solid var(--wp--preset--color--primary);
 		border-right: 8px solid transparent;
@@ -4257,7 +4279,13 @@ body:not(.fse-enabled) #colophon {
 		width: 16px;
 	}
 	.site-header .main-navigation > div > ul > li:hover li > a,
-	.site-header .main-navigation > div > ul > li.focus li > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
+		background: var(--wp--preset--color--primary);
+		color: var(--wp--preset--color--background);
+	}
+	.site-header .main-navigation > div > ul > li:hover li > a,
+	.site-header .main-navigation > div > ul > li:focus-within li > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
 		background: var(--wp--preset--color--primary);
 		color: var(--wp--preset--color--background);
@@ -4265,9 +4293,20 @@ body:not(.fse-enabled) #colophon {
 	.site-header .main-navigation > div > ul > li:hover li:hover > a,
 	.site-header .main-navigation > div > ul > li:hover li.focus > a,
 	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.site-header .main-navigation > div > ul > li.focus li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus li.focus > a,
-	.site-header .main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li:hover > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li.focus > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+		background: var(--wp--preset--color--primary-hover);
+	}
+	.site-header .main-navigation > div > ul > li:hover li:hover > a,
+	.site-header .main-navigation > div > ul > li:hover li.focus > a,
+	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li:focus-within li:hover > a,
+	.site-header .main-navigation > div > ul > li:focus-within li.focus > a,
+	.site-header .main-navigation > div > ul > li:focus-within li.current-menu-item > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {

hever/style.css

@@ -4264,18 +4264,40 @@ body:not(.fse-enabled) #colophon {
 		font-size: 0.5rem;
 	}
 	.site-header .main-navigation > div > ul > li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus > a,
+	.site-header .main-navigation > div > ul > li[focus-within] > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item > a {
 		color: var(--wp--preset--color--primary);
 	}
+	.site-header .main-navigation > div > ul > li:hover > a,
+	.site-header .main-navigation > div > ul > li:focus-within > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item > a {
+		color: var(--wp--preset--color--primary);
+	}
+	.site-header .main-navigation > div > ul > li:hover > ul,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
+		box-shadow: none;
+		overflow: hidden;
+	}
 	.site-header .main-navigation > div > ul > li:hover > ul,
-	.site-header .main-navigation > div > ul > li.focus > ul,
+	.site-header .main-navigation > div > ul > li:focus-within > ul,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
 	}
 	.site-header .main-navigation > div > ul > li:hover > ul:before,
-	.site-header .main-navigation > div > ul > li.focus > ul:before,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul:before,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
+		border-bottom: 8px solid var(--wp--preset--color--primary);
+		border-left: 8px solid transparent;
+		border-right: 8px solid transparent;
+		content: "";
+		display: block;
+		margin-left: 16px;
+		width: 16px;
+	}
+	.site-header .main-navigation > div > ul > li:hover > ul:before,
+	.site-header .main-navigation > div > ul > li:focus-within > ul:before,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
 		border-bottom: 8px solid var(--wp--preset--color--primary);
 		border-left: 8px solid transparent;
@@ -4286,7 +4308,13 @@ body:not(.fse-enabled) #colophon {
 		width: 16px;
 	}
 	.site-header .main-navigation > div > ul > li:hover li > a,
-	.site-header .main-navigation > div > ul > li.focus li > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
+		background: var(--wp--preset--color--primary);
+		color: var(--wp--preset--color--background);
+	}
+	.site-header .main-navigation > div > ul > li:hover li > a,
+	.site-header .main-navigation > div > ul > li:focus-within li > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
 		background: var(--wp--preset--color--primary);
 		color: var(--wp--preset--color--background);
@@ -4294,9 +4322,20 @@ body:not(.fse-enabled) #colophon {
 	.site-header .main-navigation > div > ul > li:hover li:hover > a,
 	.site-header .main-navigation > div > ul > li:hover li.focus > a,
 	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.site-header .main-navigation > div > ul > li.focus li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus li.focus > a,
-	.site-header .main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li:hover > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li.focus > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+		background: var(--wp--preset--color--primary-hover);
+	}
+	.site-header .main-navigation > div > ul > li:hover li:hover > a,
+	.site-header .main-navigation > div > ul > li:hover li.focus > a,
+	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li:focus-within li:hover > a,
+	.site-header .main-navigation > div > ul > li:focus-within li.focus > a,
+	.site-header .main-navigation > div > ul > li:focus-within li.current-menu-item > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {

morden/sass/_extra-child-theme.scss

@@ -155,7 +155,7 @@ body {
 			}
 
 			& > div > ul > li:hover,
-			& > div > ul > li.focus,
+			& > div > ul > li:focus-within,
 			& > div > ul > li.current-menu-item {
 
 				& > a {

morden/style-rtl.css

@@ -4255,30 +4255,60 @@ p:not(.site-title) a:hover {
 		font-size: 0.5rem;
 	}
 	.site-header-wrap .main-navigation > div > ul > li:hover > a,
-	.site-header-wrap .main-navigation > div > ul > li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > a {
+		color: rgba(var(--wp--preset--color--background), 0.8);
+	}
+	.site-header-wrap .main-navigation > div > ul > li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within > a,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > a {
 		color: rgba(var(--wp--preset--color--background), 0.8);
 	}
 	.site-header-wrap .main-navigation > div > ul > li:hover > ul,
-	.site-header-wrap .main-navigation > div > ul > li.focus > ul,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] > ul,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > ul {
 		background: var(--wp--preset--color--foreground);
 		border: 1px solid var(--wp--preset--color--foreground-high-contrast);
 		border-radius: 5px;
 		overflow: hidden;
 	}
+	.site-header-wrap .main-navigation > div > ul > li:hover > ul,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within > ul,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > ul {
+		background: var(--wp--preset--color--foreground);
+		border: 1px solid var(--wp--preset--color--foreground-high-contrast);
+		border-radius: 5px;
+		overflow: hidden;
+	}
+	.site-header-wrap .main-navigation > div > ul > li:hover li,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] li,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li {
+		border-top: 1px solid var(--wp--preset--color--foreground-high-contrast);
+	}
 	.site-header-wrap .main-navigation > div > ul > li:hover li,
-	.site-header-wrap .main-navigation > div > ul > li.focus li,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within li,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li {
 		border-top: 1px solid var(--wp--preset--color--foreground-high-contrast);
 	}
 	.site-header-wrap .main-navigation > div > ul > li:hover li:first-child,
-	.site-header-wrap .main-navigation > div > ul > li.focus li:first-child,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] li:first-child,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li:first-child {
 		border-top: 0;
 	}
+	.site-header-wrap .main-navigation > div > ul > li:hover li:first-child,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within li:first-child,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li:first-child {
+		border-top: 0;
+	}
+	.site-header-wrap .main-navigation > div > ul > li:hover li > a,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] li > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li > a {
+		background: var(--wp--preset--color--foreground);
+		color: var(--wp--preset--color--background);
+		padding: 8px 24px;
+	}
 	.site-header-wrap .main-navigation > div > ul > li:hover li > a,
-	.site-header-wrap .main-navigation > div > ul > li.focus li > a,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within li > a,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li > a {
 		background: var(--wp--preset--color--foreground);
 		color: var(--wp--preset--color--background);
@@ -4287,9 +4317,20 @@ p:not(.site-title) a:hover {
 	.site-header-wrap .main-navigation > div > ul > li:hover li:hover > a,
 	.site-header-wrap .main-navigation > div > ul > li:hover li.focus > a,
 	.site-header-wrap .main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.site-header-wrap .main-navigation > div > ul > li.focus li:hover > a,
-	.site-header-wrap .main-navigation > div > ul > li.focus li.focus > a,
-	.site-header-wrap .main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] li.current-menu-item > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+		background: var(--wp--preset--color--primary);
+	}
+	.site-header-wrap .main-navigation > div > ul > li:hover li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li:hover li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within li.current-menu-item > a,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {

morden/style.css

@@ -4284,30 +4284,60 @@ p:not(.site-title) a:hover {
 		font-size: 0.5rem;
 	}
 	.site-header-wrap .main-navigation > div > ul > li:hover > a,
-	.site-header-wrap .main-navigation > div > ul > li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > a {
+		color: rgba(var(--wp--preset--color--background), 0.8);
+	}
+	.site-header-wrap .main-navigation > div > ul > li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within > a,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > a {
 		color: rgba(var(--wp--preset--color--background), 0.8);
 	}
 	.site-header-wrap .main-navigation > div > ul > li:hover > ul,
-	.site-header-wrap .main-navigation > div > ul > li.focus > ul,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] > ul,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > ul {
 		background: var(--wp--preset--color--foreground);
 		border: 1px solid var(--wp--preset--color--foreground-high-contrast);
 		border-radius: 5px;
 		overflow: hidden;
 	}
+	.site-header-wrap .main-navigation > div > ul > li:hover > ul,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within > ul,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > ul {
+		background: var(--wp--preset--color--foreground);
+		border: 1px solid var(--wp--preset--color--foreground-high-contrast);
+		border-radius: 5px;
+		overflow: hidden;
+	}
+	.site-header-wrap .main-navigation > div > ul > li:hover li,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] li,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li {
+		border-top: 1px solid var(--wp--preset--color--foreground-high-contrast);
+	}
 	.site-header-wrap .main-navigation > div > ul > li:hover li,
-	.site-header-wrap .main-navigation > div > ul > li.focus li,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within li,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li {
 		border-top: 1px solid var(--wp--preset--color--foreground-high-contrast);
 	}
 	.site-header-wrap .main-navigation > div > ul > li:hover li:first-child,
-	.site-header-wrap .main-navigation > div > ul > li.focus li:first-child,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] li:first-child,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li:first-child {
 		border-top: 0;
 	}
+	.site-header-wrap .main-navigation > div > ul > li:hover li:first-child,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within li:first-child,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li:first-child {
+		border-top: 0;
+	}
+	.site-header-wrap .main-navigation > div > ul > li:hover li > a,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] li > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li > a {
+		background: var(--wp--preset--color--foreground);
+		color: var(--wp--preset--color--background);
+		padding: 8px 24px;
+	}
 	.site-header-wrap .main-navigation > div > ul > li:hover li > a,
-	.site-header-wrap .main-navigation > div > ul > li.focus li > a,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within li > a,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li > a {
 		background: var(--wp--preset--color--foreground);
 		color: var(--wp--preset--color--background);
@@ -4316,9 +4346,20 @@ p:not(.site-title) a:hover {
 	.site-header-wrap .main-navigation > div > ul > li:hover li:hover > a,
 	.site-header-wrap .main-navigation > div > ul > li:hover li.focus > a,
 	.site-header-wrap .main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.site-header-wrap .main-navigation > div > ul > li.focus li:hover > a,
-	.site-header-wrap .main-navigation > div > ul > li.focus li.focus > a,
-	.site-header-wrap .main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li[focus-within] li.current-menu-item > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+		background: var(--wp--preset--color--primary);
+	}
+	.site-header-wrap .main-navigation > div > ul > li:hover li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li:hover li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li:focus-within li.current-menu-item > a,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {

redhill/sass/_extra-child-theme.scss

@@ -144,7 +144,7 @@ a {
 		}
 
 		& > div > ul > li:hover,
-		& > div > ul > li.focus,
+		& > div > ul > li:focus-within,
 		& > div > ul > li.current-menu-item {
 
 			& > a {

redhill/style-rtl.css

@@ -4220,31 +4220,62 @@ p:not(.site-title) a:hover {
 		padding-left: 16px;
 	}
 	.main-navigation > div > ul > li:hover > a,
-	.main-navigation > div > ul > li.focus > a,
+	.main-navigation > div > ul > li[focus-within] > a,
+	.main-navigation > div > ul > li.current-menu-item > a {
+		background: #CA2017;
+		border-radius: 4px;
+		color: #FFFFFF;
+	}
+	.main-navigation > div > ul > li:hover > a,
+	.main-navigation > div > ul > li:focus-within > a,
 	.main-navigation > div > ul > li.current-menu-item > a {
 		background: #CA2017;
 		border-radius: 4px;
 		color: #FFFFFF;
 	}
 	.main-navigation > div > ul > li:hover > ul,
-	.main-navigation > div > ul > li.focus > ul,
+	.main-navigation > div > ul > li[focus-within] > ul,
+	.main-navigation > div > ul > li.current-menu-item > ul {
+		border-radius: 4px;
+		overflow: hidden;
+	}
+	.main-navigation > div > ul > li:hover > ul,
+	.main-navigation > div > ul > li:focus-within > ul,
 	.main-navigation > div > ul > li.current-menu-item > ul {
 		border-radius: 4px;
 		overflow: hidden;
 	}
 	.main-navigation > div > ul > li:hover li > a,
-	.main-navigation > div > ul > li.focus li > a,
+	.main-navigation > div > ul > li[focus-within] li > a,
 	.main-navigation > div > ul > li.current-menu-item li > a {
 		background: #222222;
 		color: #FFFFFF;
 		font-weight: normal;
 	}
+	.main-navigation > div > ul > li:hover li > a,
+	.main-navigation > div > ul > li:focus-within li > a,
+	.main-navigation > div > ul > li.current-menu-item li > a {
+		background: #222222;
+		color: #FFFFFF;
+		font-weight: normal;
+	}
+	.main-navigation > div > ul > li:hover li:hover > a,
+	.main-navigation > div > ul > li:hover li.focus > a,
+	.main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.main-navigation > div > ul > li[focus-within] li:hover > a,
+	.main-navigation > div > ul > li[focus-within] li.focus > a,
+	.main-navigation > div > ul > li[focus-within] li.current-menu-item > a,
+	.main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+		background: #CA2017;
+	}
 	.main-navigation > div > ul > li:hover li:hover > a,
 	.main-navigation > div > ul > li:hover li.focus > a,
 	.main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.main-navigation > div > ul > li.focus li:hover > a,
-	.main-navigation > div > ul > li.focus li.focus > a,
-	.main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.main-navigation > div > ul > li:focus-within li:hover > a,
+	.main-navigation > div > ul > li:focus-within li.focus > a,
+	.main-navigation > div > ul > li:focus-within li.current-menu-item > a,
 	.main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {

redhill/style.css

@@ -4249,31 +4249,62 @@ p:not(.site-title) a:hover {
 		padding-right: 16px;
 	}
 	.main-navigation > div > ul > li:hover > a,
-	.main-navigation > div > ul > li.focus > a,
+	.main-navigation > div > ul > li[focus-within] > a,
+	.main-navigation > div > ul > li.current-menu-item > a {
+		background: #CA2017;
+		border-radius: 4px;
+		color: #FFFFFF;
+	}
+	.main-navigation > div > ul > li:hover > a,
+	.main-navigation > div > ul > li:focus-within > a,
 	.main-navigation > div > ul > li.current-menu-item > a {
 		background: #CA2017;
 		border-radius: 4px;
 		color: #FFFFFF;
 	}
 	.main-navigation > div > ul > li:hover > ul,
-	.main-navigation > div > ul > li.focus > ul,
+	.main-navigation > div > ul > li[focus-within] > ul,
+	.main-navigation > div > ul > li.current-menu-item > ul {
+		border-radius: 4px;
+		overflow: hidden;
+	}
+	.main-navigation > div > ul > li:hover > ul,
+	.main-navigation > div > ul > li:focus-within > ul,
 	.main-navigation > div > ul > li.current-menu-item > ul {
 		border-radius: 4px;
 		overflow: hidden;
 	}
 	.main-navigation > div > ul > li:hover li > a,
-	.main-navigation > div > ul > li.focus li > a,
+	.main-navigation > div > ul > li[focus-within] li > a,
 	.main-navigation > div > ul > li.current-menu-item li > a {
 		background: #222222;
 		color: #FFFFFF;
 		font-weight: normal;
 	}
+	.main-navigation > div > ul > li:hover li > a,
+	.main-navigation > div > ul > li:focus-within li > a,
+	.main-navigation > div > ul > li.current-menu-item li > a {
+		background: #222222;
+		color: #FFFFFF;
+		font-weight: normal;
+	}
+	.main-navigation > div > ul > li:hover li:hover > a,
+	.main-navigation > div > ul > li:hover li.focus > a,
+	.main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.main-navigation > div > ul > li[focus-within] li:hover > a,
+	.main-navigation > div > ul > li[focus-within] li.focus > a,
+	.main-navigation > div > ul > li[focus-within] li.current-menu-item > a,
+	.main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+		background: #CA2017;
+	}
 	.main-navigation > div > ul > li:hover li:hover > a,
 	.main-navigation > div > ul > li:hover li.focus > a,
 	.main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.main-navigation > div > ul > li.focus li:hover > a,
-	.main-navigation > div > ul > li.focus li.focus > a,
-	.main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.main-navigation > div > ul > li:focus-within li:hover > a,
+	.main-navigation > div > ul > li:focus-within li.focus > a,
+	.main-navigation > div > ul > li:focus-within li.current-menu-item > a,
 	.main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {

rivington/sass/_extra-child-theme.scss

@@ -110,7 +110,7 @@ a {
 			}
 
 			& > div > ul > li:hover,
-			& > div > ul > li.focus,
+			& > div > ul > li:focus-within,
 			& > div > ul > li.current-menu-item {
 
 				& > a {

rivington/style-rtl.css

@@ -4174,18 +4174,40 @@ p:not(.site-title) a:hover {
 		font-size: 0.5rem;
 	}
 	.site-header .main-navigation > div > ul > li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus > a,
+	.site-header .main-navigation > div > ul > li[focus-within] > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item > a {
 		color: #CAAB57;
 	}
+	.site-header .main-navigation > div > ul > li:hover > a,
+	.site-header .main-navigation > div > ul > li:focus-within > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item > a {
+		color: #CAAB57;
+	}
+	.site-header .main-navigation > div > ul > li:hover > ul,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
+		box-shadow: none;
+		overflow: hidden;
+	}
 	.site-header .main-navigation > div > ul > li:hover > ul,
-	.site-header .main-navigation > div > ul > li.focus > ul,
+	.site-header .main-navigation > div > ul > li:focus-within > ul,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
 	}
 	.site-header .main-navigation > div > ul > li:hover > ul:before,
-	.site-header .main-navigation > div > ul > li.focus > ul:before,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul:before,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
+		border-bottom: 8px solid #CAAB57;
+		border-right: 8px solid transparent;
+		border-left: 8px solid transparent;
+		content: "";
+		display: block;
+		margin-right: 16px;
+		width: 16px;
+	}
+	.site-header .main-navigation > div > ul > li:hover > ul:before,
+	.site-header .main-navigation > div > ul > li:focus-within > ul:before,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
 		border-bottom: 8px solid #CAAB57;
 		border-right: 8px solid transparent;
@@ -4196,7 +4218,13 @@ p:not(.site-title) a:hover {
 		width: 16px;
 	}
 	.site-header .main-navigation > div > ul > li:hover li > a,
-	.site-header .main-navigation > div > ul > li.focus li > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
+		background: #CAAB57;
+		color: #060f29;
+	}
+	.site-header .main-navigation > div > ul > li:hover li > a,
+	.site-header .main-navigation > div > ul > li:focus-within li > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
 		background: #CAAB57;
 		color: #060f29;
@@ -4204,9 +4232,20 @@ p:not(.site-title) a:hover {
 	.site-header .main-navigation > div > ul > li:hover li:hover > a,
 	.site-header .main-navigation > div > ul > li:hover li.focus > a,
 	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.site-header .main-navigation > div > ul > li.focus li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus li.focus > a,
-	.site-header .main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li:hover > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li.focus > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+		background: #b59439;
+	}
+	.site-header .main-navigation > div > ul > li:hover li:hover > a,
+	.site-header .main-navigation > div > ul > li:hover li.focus > a,
+	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li:focus-within li:hover > a,
+	.site-header .main-navigation > div > ul > li:focus-within li.focus > a,
+	.site-header .main-navigation > div > ul > li:focus-within li.current-menu-item > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {

rivington/style.css

@@ -4203,18 +4203,40 @@ p:not(.site-title) a:hover {
 		font-size: 0.5rem;
 	}
 	.site-header .main-navigation > div > ul > li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus > a,
+	.site-header .main-navigation > div > ul > li[focus-within] > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item > a {
 		color: #CAAB57;
 	}
+	.site-header .main-navigation > div > ul > li:hover > a,
+	.site-header .main-navigation > div > ul > li:focus-within > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item > a {
+		color: #CAAB57;
+	}
+	.site-header .main-navigation > div > ul > li:hover > ul,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
+		box-shadow: none;
+		overflow: hidden;
+	}
 	.site-header .main-navigation > div > ul > li:hover > ul,
-	.site-header .main-navigation > div > ul > li.focus > ul,
+	.site-header .main-navigation > div > ul > li:focus-within > ul,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
 	}
 	.site-header .main-navigation > div > ul > li:hover > ul:before,
-	.site-header .main-navigation > div > ul > li.focus > ul:before,
+	.site-header .main-navigation > div > ul > li[focus-within] > ul:before,
+	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
+		border-bottom: 8px solid #CAAB57;
+		border-left: 8px solid transparent;
+		border-right: 8px solid transparent;
+		content: "";
+		display: block;
+		margin-left: 16px;
+		width: 16px;
+	}
+	.site-header .main-navigation > div > ul > li:hover > ul:before,
+	.site-header .main-navigation > div > ul > li:focus-within > ul:before,
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul:before {
 		border-bottom: 8px solid #CAAB57;
 		border-left: 8px solid transparent;
@@ -4225,7 +4247,13 @@ p:not(.site-title) a:hover {
 		width: 16px;
 	}
 	.site-header .main-navigation > div > ul > li:hover li > a,
-	.site-header .main-navigation > div > ul > li.focus li > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
+		background: #CAAB57;
+		color: #060f29;
+	}
+	.site-header .main-navigation > div > ul > li:hover li > a,
+	.site-header .main-navigation > div > ul > li:focus-within li > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
 		background: #CAAB57;
 		color: #060f29;
@@ -4233,9 +4261,20 @@ p:not(.site-title) a:hover {
 	.site-header .main-navigation > div > ul > li:hover li:hover > a,
 	.site-header .main-navigation > div > ul > li:hover li.focus > a,
 	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.site-header .main-navigation > div > ul > li.focus li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus li.focus > a,
-	.site-header .main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li:hover > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li.focus > a,
+	.site-header .main-navigation > div > ul > li[focus-within] li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+		background: #b59439;
+	}
+	.site-header .main-navigation > div > ul > li:hover li:hover > a,
+	.site-header .main-navigation > div > ul > li:hover li.focus > a,
+	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.site-header .main-navigation > div > ul > li:focus-within li:hover > a,
+	.site-header .main-navigation > div > ul > li:focus-within li.focus > a,
+	.site-header .main-navigation > div > ul > li:focus-within li.current-menu-item > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {