fix(menu): cap maximum elevation for nested menus (#17687)

Currently we increase the elevation of each nested menu by one, however we don't have an upper limit which means that menus 20 levels down won't have any elevation (the elevation starts at 4). This is a bit of an edge case since opening 20 menus is a lot, but it's easy to handle on our end.

src/material/menu/menu.ts

@@ -374,7 +374,9 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
    */
   setElevation(depth: number): void {
     // The elevation starts at the base and increases by one for each level.
-    const newElevation = `mat-elevation-z${MAT_MENU_BASE_ELEVATION + depth}`;
+    // Capped at 24 because that's the maximum elevation defined in the Material design spec.
+    const elevation = Math.min(MAT_MENU_BASE_ELEVATION + depth, 24);
+    const newElevation = `mat-elevation-z${elevation}`;
     const customElevation = Object.keys(this._classList).find(c => c.startsWith('mat-elevation-z'));
 
     if (!customElevation || customElevation === this._previousElevation) {