.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;
}
<nav>
<ul class="container">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<div class="parent">
<button class="trigger-btn" type="button" popovertarget="products-list">Products</button>
<div id="products-list" popover>
<ul>
<li>Prod1</li>
<li>Prod1</li>
<li>Prod1</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
我正在学习新的 Popover api
我想使用新的 popover api 构建一个下拉导航,所以我编写了上面的演示,当前的行为是 popover 位于页面左侧,我想将其放在产品按钮下
我尝试覆盖
:popover-open
css,但不知道为什么 position: absolute
不起作用,它应该在父框中。
你忘了添加右:0;
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
#products-list:popover-open {
width: 200px;
height: 100px;
position: absolute;
inset: unset;
margin: 0;
right:0;
}
.parent {
position: relative;
}
<nav>
<ul class="container">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<div class="parent">
<button class="trigger-btn" type="button" popovertarget="products-list">Products</button>
<div id="products-list" popover>
<ul>
<li>Prod1</li>
<li>Prod1</li>
<li>Prod1</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>