How to Configure Strict CSS Popover Nested Anchor Popovers in Google Chrome

Cascading navigation flyouts, multi-level context menus, and nested settings panels are among the most intricate UI patterns on the web. In legacy implementations, nested flyouts frequently suffered from accidental closures, hover boundary gaps, and z-index clipping. Within Google Chrome, combining the native HTML Popover API with CSS Anchor Positioning enables zero-JavaScript, multi-level nested menus where child flyouts remain open seamlessly as users traverse down nested trees.

The Nested Popover Ancestry Model

Under the Popover specification, an open popover tree maintains an implicit parent-child ancestry:

• When a button inside an active popover="auto" container invokes a secondary popover, the browser establishes a parent-child relationship.
• Interacting with the child popover does not trigger light-dismiss on the parent popover.
• Dismissing the parent popover automatically collapses all child descendants in clean cascade order.

Configuring Strict Cascading Submenus

To tether a child submenu directly to its parent menu item with precise anchor positioning:

<!-- Primary Menu Trigger -->
<button type="button" popovertarget="main-menu" class="primary-nav-trigger">
  Tools
</button>

<!-- Primary Popover Menu -->
<div id="main-menu" popover="auto" class="context-menu-level-1">
  <div class="menu-item">Inspect Element</div>
  
  <!-- Submenu trigger inside parent popover -->
  <button type="button" 
          popovertarget="export-submenu" 
          class="submenu-trigger" 
          id="export-trigger">
    Export Data &rarr;
  </button>
</div>

<!-- Child Popover Submenu -->
<div id="export-submenu" popover="auto" class="context-menu-level-2">
  <div class="menu-item">Export as JSON</div>
  <div class="menu-item">Export as CSV</div>
  <div class="menu-item">Export as PDF</div>
</div>

Styling Multi-Level Anchors in CSS

Tether each nested level to its respective triggering item using CSS Anchor Positioning:

/* Anchor names */
.primary-nav-trigger {
  anchor-name: --main-menu-anchor;
}

#export-trigger {
  anchor-name: --export-trigger-anchor;
}

/* Primary menu positioning */
.context-menu-level-1 {
  position: fixed;
  position-anchor: --main-menu-anchor;
  top: anchor(bottom);
  left: anchor(start);
  margin-top: 4px;
}

/* Submenu positioning relative to parent menu item */
.context-menu-level-2 {
  position: fixed;
  position-anchor: --export-trigger-anchor;
  top: anchor(top);
  left: anchor(end);
  margin-left: 4px;
  position-try-fallbacks: flip-inline;
}

If the user opens the submenu near the right viewport perimeter, flip-inline flips the child flyout to the left side of the parent menu automatically without clipping.

Auditing Nested Popovers in Chrome DevTools

Google Chrome provides specialized DevTools tooling to audit top-layer popover hierarchies:

1. Open DevTools (F12) and select the Elements panel.
2. Trigger both the parent menu and child submenu.
3. Inspect the #top-layer container. DevTools displays both popover nodes in the stack, preserving ancestry relationships.
4. Click outside the child submenu on the parent menu. Notice that the child collapses while the parent remains open.
5. Click outside both menus to verify complete recursive cleanup.