Some fixes for IE11 and older Edge:

- Make submenus expand correctly on hover (via JS)
- Make submenus look right
- Make submenu keyboard navigation work (via JS)
- Fix sidebar width (via JS)

See: https://forums.classicpress.net/t/dropdown-not-working-on-edge/2187

wp-content/themes/classicpress-susty-child/functions.php

@@ -4,7 +4,7 @@
  * Stylesheet version (cache buster)
  */
 function cp_susty_get_asset_version() {
-	return '20200301';
+	return '20200301.3';
 }
 
 

wp-content/themes/classicpress-susty-child/script.js

@@ -20,4 +20,27 @@ jQuery( document ).ready( function( $ ) {
 
 		return false; // do not follow link destination
 	} );
+
+	// Fix main menu hover and keyboard navigation on IE11 and older Edge
+	// Note, also using lack of :focus-within as a proxy for whatever issue
+	// causes submenus to not expand normally (broken selector specificity?)
+	// and whatever issue causes the sidebar to display incorrectly (width too
+	// narrow)
+	try {
+		document.querySelector( ':focus-within' );
+	} catch ( e ) {
+		var sel = '.nav--toggle-sub li';
+		function submenuExpand() {
+			$( this ).children( 'ul.sub-menu' ).addClass( 'open' );
+		}
+		function submenuCollapse() {
+			$( this ).children( 'ul.sub-menu' ).removeClass( 'open' );
+		}
+		$( document )
+			.on( 'mouseover', sel, submenuExpand )
+			.on( 'mouseout', sel, submenuCollapse )
+			.on( 'focusin', sel, submenuExpand )
+			.on( 'focusout', sel, submenuCollapse );
+		$( document.body ).addClass( 'ie11' );
+	}
 } );

wp-content/themes/classicpress-susty-child/style.css

@@ -589,6 +589,7 @@ ul#primary-menu.menu li a,
 ul#primary-menu.menu li a:visited {
 	color: rgba(255, 255, 255, 1.0);
 	border-radius: 6px;
+	border-width: 0; /* IE11/Edge fix */
 }
 
 ul#primary-menu.menu li.current_page_parent > a,
@@ -640,6 +641,12 @@ ul#primary-menu.menu li.current_page_item ul li a:active {
 	display: block;
 }
 
+/* IE11/Edge fix for main menu submenus and keyboard navigation */
+/* .open class applied in JS */
+.nav--toggle-sub li > ul.sub-menu.open {
+	display: block;
+}
+
 #masthead .menu #menu-item-606 .sub-menu {
 	max-width: 10em;
 }
@@ -701,6 +708,7 @@ ul#primary-menu.menu li.current_page_item ul li a:active {
 		margin-top: 0.69em;
 		margin-left: 0.12em;
 		vertical-align: middle;
+		display: inline-block; /* IE11/Edge fix */
 	}
 }
 
@@ -750,6 +758,12 @@ header#page-title h1 {
 	padding: 0 1em 1em 1em;
 }
 
+/* IE11/Edge fix for incorrect display width */
+/* body.ie11 class applied in JS */
+body.ie11 #sidebar {
+	max-width: 27rem;
+}
+
 header#page-title {
 	min-width: 100%;
 	padding: 0 1em;