<div class="container">
  <details id="target">
    <summary id="anchor">Dropdown Menu</summary>

    <nav>
      <ul>
        <li><a href="#1">Link 1</a></li>
        <li><a href="#2">Link 2</a></li>
      </ul>
    </nav>
  </details>

  <details id="target-two">
    <summary id="anchor-two">Dropdown Menu 2</summary>

    <nav>
      <ul>
        <li><a href="#1">Link 1</a></li>
        <li><a href="#2">Link 2</a></li>
      </ul>
    </nav>
  </details>
</div>

#anchor {
  anchor-name: --anchor-one;
}

#target {
  &::details-content {
    position-anchor: --anchor-one;
    position-area: block-end center;
  }
}

#anchor-two {
  anchor-name: --anchor-two;
}

#target-two {
  &::details-content {
    position-anchor: --anchor-two;
    position-area: span-block-end inline-end;
    position-try-fallbacks: block-end center;
  }
}

details {
  color: white;
}

[open]::details-content {
  background-color: white;
  box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.07);
  position: absolute;

  > * {
    margin: 0;
    padding: 0;
  }

  width: anchor-size(width);
}

@layer pen {
  * {
    box-sizing: border-box;
    &:focus-visible {
      outline-offset: 3px;
      outline-style: dashed;
      outline-width: 4px;
    }
  }
  html,
  body {
    height: 100%;
  }

  body {
    display: grid;
    place-content: center;
    background: #efefef;
  }

  .container {
    display: flex;
  }

  summary {
    background-color: blue;
    cursor: pointer;
    display: grid;
    padding: 1rem;
  }

  nav {
    ul {
      list-style: "";
      margin: 0;
      padding: 0;
    }

    a {
      display: grid;
      padding-block: 0.65rem;
      place-content: center;
      white-space: nowrap;
    }
    li:has(a:hover, a:focus-visible) {
      background: #ffeffe;
    }
  }
}