Есть ли способ сделать развернутый элемент <details> горизонтально центрированным относительно родительского элемента <s ⇐ Html

[Anonymous]

Я пытаюсь использовать элемент , чтобы добавить раскрывающееся меню на панель навигации, так как это действительно приятный и понятный способ сделать это без обращения к JavaScript.
Все работает так, как задумано, но я бы хотел стилизовать параметры раскрывающегося списка так, чтобы вокруг них была небольшая рамка (и, следовательно, отступы), так как в противном случае текст будет плавать над содержимым моего веб-сайта, что будет выглядеть не так. . Однако при этом я сталкиваюсь с проблемой, что расширенный элемент всегда остается выровненным по левому краю со своим родительским элементом , то есть элементы раскрывающегося списка расширяются только вправо и не выглядит не очень хорошо.
Вот минимальный пример:

Код: Выделить всё

.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;
}

Код: Выделить всё

[url={targetUrl}]Dropdown Item with longer name[/url]

Есть ли способ сделать элементы развернуть по горизонтали по центру родительского элемента , когда они имеют разную ширину?
Обратите внимание: ранее я использовал вместо элементы для каждого элемента панели навигации, но, попробовав множество вещей, я подумал вероятность того, что подход облегчит их выравнивание... пока безрезультатно. Это означает, что у меня нет предпочтений, и меня устраивает любой подход, если он работает.

Подробнее здесь: https://stackoverflow.com/questions/793 ... entered-wi