Explore using the Popover API in Twenty Fifteen theme for submenus.

src/wp-content/themes/twentyfifteen/functions.php

@@ -477,6 +477,43 @@ function twentyfifteen_scripts() {
 }
 add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
 
+$_wp2015_id = null;
+$_wp2015_i  = 0;
+add_filter(
+	'walker_nav_menu_start_el',
+	static function ( $output, $item, $depth, $args ) {
+		global $_wp2015_id, $_wp2015_i;
+
+		if ( isset( $item->classes ) && in_array( 'menu-item-has-children', $item->classes, true ) ) {
+			$_wp2015_i++;
+			$_wp2015_id = 'wp-submenu-' . $_wp2015_i;
+
+			$output .= '<button class="dropdown-toggle" popovertarget="' . esc_attr( $_wp2015_id ) . '" aria-expanded="false">';
+			$output .= '<span class="screen-reader-text">';
+			$output .= __( 'expand child menu', 'twentyfifteen' );
+			$output .= '</span>';
+			$output .= '</button>';
+		}
+		return $output;
+	},
+	10,
+	4
+);
+
+add_filter(
+	'nav_menu_submenu_attributes',
+	static function ( $attrs ) {
+		global $_wp2015_id;
+		if ( isset( $_wp2015_id ) ) {
+			$attrs['id']      = $_wp2015_id;
+			$attrs['popover'] = 'auto';
+
+			$_wp2015_id = null;
+		}
+		return $attrs;
+	}
+);
+
 /**
  * Enqueue styles for the block-based editor.
  *

src/wp-content/themes/twentyfifteen/js/functions.js

@@ -10,23 +10,20 @@
 		secondary, button;
 
 	function initMainNavigation( container ) {
-		// Add dropdown toggle that display child menu items.
-		container.find( '.menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
-
-		// Toggle buttons and submenu items with active children menu items.
-		container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' );
-		container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
-
-		container.find( '.dropdown-toggle' ).on( 'click', function( e ) {
-			var _this = $( this );
-			e.preventDefault();
-			_this.toggleClass( 'toggle-on' );
-			_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
-			_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
-			_this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
+		container.querySelectorAll( '.sub-menu[popover]' ).forEach( function ( subMenu ) {
+			var toggleButton = container.querySelector( '.dropdown-toggle[popovertarget="' + subMenu.id + '"]' );
+			subMenu.addEventListener( 'toggle', function () {
+				toggleButton.classList.toggle( 'toggle-on' );
+				toggleButton.setAttribute( 'aria-expanded', toggleButton.getAttribute( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
+				toggleButton.innerHTML = toggleButton.innerHTML === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand;
+			} );
+		} );
+
+		container.querySelectorAll( '.current-menu-ancestor > .sub-menu[popover]' ).forEach( function ( subMenu ) {
+			subMenu.showPopover();
 		} );
 	}
-	initMainNavigation( $( '.main-navigation' ) );
+	initMainNavigation( document.querySelector( '.main-navigation' ) );
 
 	// Re-initialize the main navigation when it is updated, persisting any existing submenu expanded states.
 	$( document ).on( 'customize-preview-menu-refreshed', function( e, params ) {

src/wp-content/themes/twentyfifteen/style.css

@@ -676,15 +676,23 @@ a:focus {
 	margin: 0;
 }
 
-.main-navigation ul ul {
+.main-navigation ul ul:not([popover]) {
 	display: none;
 	margin-left: 0.8em;
 }
 
-.main-navigation ul .toggled-on {
+.main-navigation ul ul:not([popover]).toggled-on {
 	display: block;
 }
 
+.main-navigation ul ul[popover] {
+	margin-left: 0.8em;
+	position-anchor: --parent-link;
+	top: anchor(bottom);
+	left: anchor(center);
+	justify-self: anchor-center;
+}
+
 .main-navigation li {
 	border-top: 1px solid #eaeaea;
 	border-top: 1px solid rgba(51, 51, 51, 0.1);
@@ -702,6 +710,7 @@ a:focus {
 }
 
 .main-navigation .menu-item-has-children > a {
+	anchor-name: --parent-link;
 	padding-right: 48px;
 }