Beispiel:Test-popover-verschachtelt anchor.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test verschachtelte Popover mit Anchor positioniert</title>
<style>
[popover] {
top: 3em;
left: 3em;
top: anchor(top);
left: anchor(right);
margin: 0;
}
button {
font-size: 1em;
}
button::after {
content: '▼';
content: '▼' / '';
}
button:has(+ :popover-open)::after {
content: '▲';
content: '▲' / '';
}
</style>
</head>
<body>
<h1>Test verschachtelte Popover mit Anchor positioniert</h1>
<div>
<button popovertarget="u1">U1</button>
<ul id="u1" popover>
<li>U11</li>
<li>
<button popovertarget="u12">U12</button>
<ul id="u12" popover>
<li>U121</li>
<li>
<button popovertarget="u122">U122</button>
<ul id="u122" popover>
<li>U1221</li>
<li>
<button popovertarget="u1222">U1222</button>
<ul id="u1222" popover>
<li>U12221</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
