<header class="top-app-bar elevation-1">
  <nav>
    <span class="title">Web Shop</span>
    <span class="nav-links">
      <a href="#">Home</a>
      <button popovertoggletarget="products">
        Products
        <i class="material-icons">expand_more</i>
      </button>
      <a href="#">Pricing</a>
    </span>
    <div popover class="menu elevation-3" id="products">
      <ul>
        <li>
          <a autofocus href="#">HTML</a>
        </li>
        <li>
          <button popovertoggletarget="css">
            CSS
            <i class="material-icons">chevron_right</i>
          </button>
        </li>
        <li>
          <a href="#">JavaScript</a>
        </li>
      </ul>
    </div>
  </nav>
  <div popover class="menu elevation-3" id="css">
    <ul>
      <li>
        <a autofocus href="#">:has()</a>
      </li>
      <li>
        <a href="#">Anchoring</a>
      </li>
      <li>
        <a href="#">Properties and Values API</a>
      </li>
    </ul>
  </div>
</header>
<main>
  <h1>Welcome to the Web Shop</h1>
</main>

@layer demo {
  [popover] {
    margin: 0;
    background: var(--md-sys-comp-top-app-bar-background-color);
  }

  button[popovertoggletarget] {
    box-shadow: none;
    font-size: inherit;
  }

  .menu {
    border: 0;
    padding: var(--size-4);
    border-radius: var(--radius-2);
  }

  :is(a[href], button):is(:hover, :focus-visible) {
    color: var(--blue-8);
    text-decoration: none;
  }

  .menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .menu li {
    width: 100%;
    padding: 0;
    text-align: left;
  }

  .nav-links {
    display: inline-flex;
    gap: var(--size-4);
    align-items: center;
    justify-content: center;
  }

  nav,
  header {
    position: relative;
  }

  [popovertoggletarget="products"] {
    anchor-name: --products;
  }

  [popovertoggletarget="css"] {
    anchor-name: --css;
  }

  #css {
    position: absolute;
    top: anchor(--css top);
    left: anchor(--css right);
  }

  #products {
    position: absolute;
    left: anchor(--products left);
    top: anchor(--products bottom);
    margin: 0;
  }

  .anchor {
    anchor-name: --anchor;
    width: max(48px, 10vmin);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: red;
    /*margin-left: -1000px;*/
  }
  .anchor,
  #anchored {
    translate: var(--offset-x, 0) 0;
  }

  .anchor svg {
    width: 100%;
    fill: var(--gray-3);
  }

  #anchored {
    position: absolute;
    position-fallback: --top-to-bottom;
    /*left: anchor(--anchor left);
  top: anchor(--anchor top);*/
    /*anchor-scroll: --anchor;*/
    margin: 0;
    background: purple;
    color: var(--gray-0);
    padding: var(--size-4);
    /* Assumptions */
    /*transform: translateX(calc(anchor-size(--anchor width) * 1px);*/
  }
}

@layer base {
  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  :where([popup]) {
    margin: auto;
    border-width: initial;
    border-style: solid;
  }

  body {
    background: var(--gradient-7);
    font-family: "Google Sans", sans-serif, system-ui;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    min-height: 100vh;
  }

  main h1 {
    color: var(--gray-0);
    max-inline-size: 100%;
  }

  main {
    padding: var(--size-4);
  }

  .top-app-bar {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .top-app-bar .title {
    font-family: "Google Sans", sans-serif, system-ui;
    flex: 0 0 auto;
    margin-right: var(--size-8);
  }

  nav {
    width: 100%;
    max-width: min(100%, var(--size-lg));
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  :is(nav, .menu) :is(a[href], button) {
    min-height: 48px;
    color: var(--gray-8);
    background: none;
    place-items: center;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
  }
}