Как разместить поповер в CSS ⇐ Html

[Anonymous]

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

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}

#products-list:popover-open {
width: 200px;
height: 100px;
position: absolute;
inset: unset;
margin: 0;
}

.parent {
position: relative;
}

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

[list]
[*][url=#]Home[/url]
[*][url=#]About[/url]
[*]

Products


Prod1
[*]Prod1
[*]Prod1
[/list]

Я изучаю новый API Popover
Я хочу создать раскрывающуюся навигацию с использованием нового API popover, поэтому я написал приведенную выше демонстрацию, текущее поведение — всплывающее окно находится в левой части страницы, я хочу поместить его под кнопку продуктов


Я пытался переопределить :popover-open css, но не знаю, почему позиция: Absolute не работает, она должна быть в родительском поле.

Подробнее здесь: https://stackoverflow.com/questions/782 ... ver-in-css