下拉菜单右侧padding不生效及展开方向调整问题求助

我遇到了两个关于下拉菜单的问题，先说说最困扰我的那个：我不想修改下拉菜单的min-width: 200px;属性，但想给菜单右侧加padding，可是直接给.dropdown-menu加padding-right后，效果完全不是我想要的样子。

（示意图：展示了期望下拉菜单右侧增加空白padding的效果）

另外还有个小问题，我搞不清楚怎么让下拉菜单向左展开，而不是默认的向右展开，不过当前优先级最高的还是padding的问题。

我先把自己写的代码贴出来：

HTML 代码 #

<nav>
  <ul class="nav-menu">
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">About</a>
      <ul class="dropdown-menu">
        <li><a href="/foo.html">Foo</a></li>
        <li><a href="/bar.html">Bar</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS 代码 #

nav {
  width: 200px;
  position: relative;
}

.nav-menu {
  background-color: orange;
  display: flex;
  flex-direction: row;
}

.dropdown {
  position: relative;
}

a[data-toggle="dropdown"] {
  display: flex;
  align-items: center;
  background: transparent;
  color: blue;
  padding: 10px 15px;
  border-radius: 4px;
  transition: background 0.3s ease;
  white-space: nowrap;
}

a[data-toggle="dropdown"]:hover {
  color: black;
}

.nav-menu {
  gap: 10px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  align-items: center;
  width: 100%;
}

.dropdown-menu {
  list-style: none;
  padding: 10px 15px;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  /* min-width: 200px; */
  width: auto;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  overflow: hidden;
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1000;
}

.dropdown-menu.show {
  transform: scaleY(1);
  opacity: 1;
}

.dropdown-menu:before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  clip-path: inset(0 0 0 0);
}

JavaScript 代码 #

document.querySelectorAll('.dropdown').forEach((dropdown) => {
  const button = dropdown.querySelector('a[data-toggle="dropdown"]');
  const menu = dropdown.querySelector('.dropdown-menu');

  button.addEventListener('click', (event) => {
    event.preventDefault();
    document.querySelectorAll('.dropdown-menu.show').forEach((openMenu) => {
      if (openMenu !== menu) {
        openMenu.classList.remove('show');
      }
    });
    const buttonWidth = button.offsetWidth;
    menu.style.width = `${buttonWidth}px`;
    menu.classList.toggle('show');
  });
});

// to close the dropdown when clicked anywhere else on the page
document.addEventListener('click', (event) => {
  if (!event.target.closest('.dropdown')) {
    document.querySelectorAll('.dropdown-menu.show').forEach((menu) => {
      menu.classList.remove('show');
    });
  }
});

我试过给.dropdown-menu添加padding-right，但完全达不到预期效果，有没有大佬能帮忙看看问题出在哪？

备注：内容来源于stack exchange，提问作者Dmitry Bubnenkov