<details open>
  <summary>Close Level 0</summary>
  <button popovertarget="lvl1">Open/Close Level 1</button>
  <button popovertarget="lvl2">Open/Close Level 2</button>
</details>
<div id="lvl1" popover="manual">
  <h2>Level 1 Popup</h2>
  <button popovertarget="lvl2">Open/Close Level 2</button>
</div>
<div id="lvl2" popover="manual">
  <h2>Level 2 Popup</h2>
  <button popovertarget="lvl3">Open/Close Level 3</button>
</div>
<div id="lvl3" popover="manual">
  <h2>Level 3 Popup</h2>
  <button popovertarget="lvl4">Open/Close Level 4</button>
</div>

<div id="lvl4" popover="manual">
  <h2>Level 4 Popup</h2>
</div>
div {
  position: absolute;
  inset: unset;
}
#lvl1 {
  top: 10vh;
  left: 10vw;
}
#lvl2 {
  top: 20vh;
  left: 20vw;
}
#lvl3 {
  top: 30vh;
  left: 30vw;
}
#lvl4 {
  top: 40vh;
  left: 40vw;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.