This is fairly complicated and has a few features, so it might be best to watch the original Kevin Powell turorial: https://www.youtube.com/watch?v=DNXEORSk4GU

<style>
  /*general styles not needed for anchor positioning begin*/
  body {
    background: #0e0e1a;
    font-size: 32px;
  }
  h1 {
    color: white;
    font-size: 32px;
    text-align: center;
  }

  /*general styles not needed for anchor positioning end */

  /* button (needed for user interaction) styles begin. Some styles are optional*/
  .buttonWrapper {
    /*put button in middle of page*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .button {
    padding: 12px;
    border-radius: 50%;
    aspect-ratio: 1; /*keeps letters "KP" centered vertically in button*/
    background: #0d8abc;
    anchor-name: --kevinPopoverTrigger; /* this button is the thing the content to show/hide on click will be anchored to (positioned relative TO.)  Can be be named anything, but be sure to use the same name in the content to show or hide, in  this case a dialog element with class "popupWrapper, see below" )*/
    border: 6px solid #0d8abc;
    transition:
      border 0.4s,
      scale 0.4s;
    color: white;
    font-weight: bold;
    font-size: 32px;
  }
  .button:hover {
    border: 6px solid #515194;
    outline: 0;
  }
  .button:active {
    scale: 0.95;
  }

  /* button (needed for user interaction) styles end*/

  dialog.popupWrapper {
    /* anchoring to the button */
    position: absolute;
    position-anchor: --kevinPopoverTrigger; /*this tells the browser what element name (in this case the button "kevinpopupTrigger) the popupWrapper should be positioned relative to. See "anchor-name" above in button)*/
    inset: auto; /*remove any browser default top, bottom, left, right positioning*/
    bottom: anchor(bottom); /*put the popup content below where the triggger button ends*/
    left: anchor(right); /*put the right edge of the popup content to the right edge of the button content*/
    opacity: 0;
    font-size: 18px;
    transition:
      opacity 1s,
      display 1s, /* note that "display" is transtioned here which usually isn't supported, but by using "@starting style" in dialog.popupWrapper:popover-open, it can be achieved.*/
      overlay 1s;
    transition-behavior: allow-discrete; /*allows a "discrete" value like "display" (that is either on or off) to be transitioned. For fade out of the popup content, this means the browser waits for any non-display transitioned properties to occur FIRST (like opacity facing to 0) and THEN the display is toggle to none. To fade IN the popup content we also need "@starting style" in the popup open state, see below. "transition-behavior" may not work in older browsers, but this is okay--the popup will still come in, it just won't animate in. IN MY TESTING THIS MUST BE AFTER TRANSITION STYLES AND ANY DISPLAY STYLES THAT ARE DECLARED IN ORDER TO WORK*/
    position-try-fallbacks: --kevinLeft; /*when browser detects the popupContent is overflowing the screen real estate, reposition the popup location as per the definition of "kevinLeft" found in "@position-try defined just belowof right edge of the popup content to the LEFT of the trigger button content, instead of the to the right . NICE!*/
    margin-left: 16px;
    border: 0;
    padding: 8px;
    border-radius: 0.25rem;
    background: #0d89ba;
    color: white;
    overflow: hidden;
  }

  @position-try --kevinLeft {
    inset: auto;
    top: anchor(
      bottom
    ); /*the top of the popup conent should be at the bottom of the trigger content button when overflow occurs*/
    right: anchor(
      right
    ); /*the right of the popup conent should be at the right of the trigger content button when overflow occurs. Note that ANY CSS can be here as well, not just positioning CSS*/
  }

  dialog.popupWrapper:popover-open {
    /*"the pop up wrapper (content you want to hide/show) is automatically hidden by the browser when "popover" attribute is added to the elements html (see html below). But, when the trigger button is clicked, the browser automacally adds the attribute "popover-open" to the element you wish to hide or show, causing it to show*/
    display: grid;
    opacity: 1;
    @starting-style {
      /*This allows popup container to fade IN (fade out is handled just with "transition-behavior: allow-discrete" on closed state of popupWrapper) This must be placed AFTER opacity: 1, so cascade does not override the opacity 0. Also note, that strangely, this must be INISDE the dialog.popupWrapper style, unlike media queries. "Starting style" says that when popup content first comes in, it needs to have an opacity of 0, (display is immediately toggled on, but opacity 0 means you can't see it at first), THEN fade the opacity to 1, so you can see what is actually alread displayed.*/
      opacity: 0;
    }
  }

  dialog.popupWrapper .profileDisplayGrid {
    display: grid; /*change as required*/
    gap: 8px;
  }
</style>


<html lang="en-CA">
  <head>
    <title>menu popover</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  </head>
  <body>
    <header>
      <h1>Anchor positioning popover content to a button</h1>
    </header>
    <p>IMPORTANT NOTE:   as of Sept. 2025 anchor positioning only works in Chromium browsers. There is a polyfill: https://github.com/oddbird/css-anchor-positioning, BUT IT DOES NOT WORK RELIABLY AT ALL, SO ANCHOR POSITIONING CANNOT BE USED YET. FIREFOX AND SAFARI SAY THEY WILL BE IMPLEMENTING SUPPORT IN FALL 2025 
   <!-- THIS DOES NOT WORK: <script type="module">
      if (!("anchorName" in document.documentElement.style)) {
        import("https://unpkg.com/@oddbird/css-anchor-positioning");
      }
    </script>--></p>
<p>NOTE THAT THE THING YOU WANT TO TRIGGER THE HIDE SHOW CONTENT MUST HAVE "popovertarget" attribute set to the same name as the dialog element's (or whatever element you use) id for the content you want to show/hide. The content you want to show or hide must also have the attribute "popover" on it. THE BROWSER AUTOMATICALLY HIDES THE ELEMENT WITH THE "popover" element on it when the page loads. It then adds an "open" attribute to the content you want to hide and show when there is a click on the button with the popovertarget attribute on it. </p>
    <div class="buttonWrapper">
      <button popovertarget="myThingToDisplayOnButtonClick" id="custom-user-button" class="button">KP</button>
    </div>

    <dialog popover id="myThingToDisplayOnButtonClick" class="popupWrapper">
      <div class="profileDisplayGrid">
        <span>UserName838</span>
        <span>email@address.com</span>
        <span>Manage Account</span>
        <span>Sign out</span>
      </div>
    </dialog>
  </body>
</html>