<div id="menu-container">
  <button id="trigger" popovertarget="menu">Open</button>
  <div popover id="menu" anchor="trigger">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </div>
</div>

<div style="display: grid; place-content: center">
  <button id="move-right-top">move right top</button>
  <button id="move-left-bottom">move left bottom</button>
  <button id="move-right-bottom">move right bottom</button>
  <button id="move-left-top">move left top</button>
</div>
[popover] {
  top: anchor(top);
  left: calc(anchor(right) + 12px);
  position-try-options: flip-block, flip-inline;
}

#menu-container {
  background-color: red;
  position: absolute
}

 .left-top {
    position: absolute;
    left: 0;
    top: 0;
  }

  .right-top {
    position: absolute;
    right: 0;
    top: 0;
  }

  .left-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .right-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
  }
const menuContainer = document.getElementById("menu-container");
  document
    .getElementById("move-right-top")
    .addEventListener("click", function () {
      menuContainer.classList.add("right-top");
      menuContainer.classList.remove("left-top");
      menuContainer.classList.remove("left-bottom");
      menuContainer.classList.remove("right-bottom");
    });

  document
    .getElementById("move-left-bottom")
    .addEventListener("click", function () {
      menuContainer.classList.add("left-bottom");
      menuContainer.classList.remove("left-top");
      menuContainer.classList.remove("right-top");
      menuContainer.classList.remove("right-bottom");
    });

  document
    .getElementById("move-right-bottom")
    .addEventListener("click", function () {
      menuContainer.classList.add("right-bottom");
      menuContainer.classList.remove("left-top");
      menuContainer.classList.remove("left-bottom");
      menuContainer.classList.remove("right-top");
    });

  document
    .getElementById("move-left-top")
    .addEventListener("click", function () {
      menuContainer.classList.add("left-top");
      menuContainer.classList.remove("right-top");
      menuContainer.classList.remove("left-bottom");
      menuContainer.classList.remove("right-bottom");
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.