如何使展开的<details>元素与父<summary>元素水平居中对齐？

我尝试使用<details>元素为导航栏添加下拉菜单，这种方式无需JavaScript，简洁美观。目前功能正常，但我想为下拉选项添加边框（以及相应的内边距），否则文本会覆盖网站内容，影响视觉效果。然而这样做后，展开的<details>元素始终与父<summary>元素左对齐，导致下拉选项仅向右侧扩展，外观不佳。

最简示例 #

CSS代码 #

.nav-item {
  padding: 10px;
}

.navbar-nav {
  display: flex;
}

.navbar-nav a {
  text-decoration: none;
}

.navbar-nav a:hover {
  color: #94add7;
}

.dropdownText:hover {
  color: #94add7;
}

.dropdownItem {
  /* display: none; */
  /* width: 100px; */
  position: absolute;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid black;
}

.dropdownText {
  cursor: pointer;
}

.dropdownToggle details>summary {
  list-style: none;
}

.dropdownToggle details>summary::-webkit-details-marker {
  display: none;
}

HTML代码 #

<div class="navbar-nav">
  <div class="nav-item">
    <a class="nav-link">Link 1</a>
  </div>

  <div class="nav-item">
    <a class="nav-link">Link 2</a>
  </div>
  <div class="nav-item">
    <a class="nav-link">Link 3</a>
  </div>
  <div class="nav-item">●</div>
  <div class="nav-item">
    <div class="dropdownToggle">
      <details>
        <summary class="dropdownText">Dropdown Toggle</summary>
        <div class="dropdownItem">
          <a href="{targetUrl}">Dropdown Item with longer name</a>
        </div>
      </details>
    </div>
  </div>
</div>

核心问题：当<details>与<summary>宽度不同时，如何让展开的下拉内容与父<summary>元素水平居中？

注：我之前使用<ul>而非<div>作为导航项，尝试多种方法后改用<div>仍未解决，两种方式均可接受。

要实现下拉内容相对于<summary>水平居中，只需通过CSS定位和变换属性调整.dropdownItem的位置即可：

1. 给.dropdownToggle添加相对定位，作为绝对定位元素的参考容器：

.dropdownToggle {
  position: relative;
}

2. 修改.dropdownItem的样式，通过left: 50%和transform: translateX(-50%)实现自适应水平居中：

.dropdownItem {
  position: absolute;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid black;
  /* 新增居中样式 */
  left: 50%;
  transform: translateX(-50%);
  /* 可选：设置最小宽度避免内容换行，按需调整 */
  min-width: 180px;
}

修改后，下拉框会以<summary>所在的.dropdownToggle容器为基准，自动水平居中，无论下拉内容宽度比<summary>宽还是窄，都能保持对齐效果。如果需要兼容极旧浏览器，也可以用固定宽度加负边距的方式替代transform，但transform的方式无需提前知晓宽度，灵活性更强。

内容的提问来源于stack exchange，提问作者VMX