menuitem-anchor-positioning-ref.html (867B)
1 <!DOCTYPE html> 2 <link rel=stylesheet href=resources/menu-elements-styles.css> 3 <style> 4 /* Only buttons can trigger popovers, so style buttons like menuitems, and 5 * reset some of their default styles. */ 6 button { 7 box-sizing: content-box; 8 font-size: unset; 9 font-family: unset; 10 text-align: unset; 11 background: unset; 12 border: 0; 13 } 14 </style> 15 16 <div class=menubar> 17 <div class=menuitem>Nothing</div> 18 <button class=menuitem id=trigger popovertarget=top-menulist>Trigger</button> 19 </div> 20 21 <div popover class="menulist menulist-with-menubar-anchor" id=top-menulist> 22 <button class=menuitem id=trigger2 popovertarget=sub-menulist>Trigger 2</button> 23 </div> 24 25 <div popover class="menulist menulist-with-menulist-anchor" id=sub-menulist> 26 <div class=menuitem>Most nested item</div> 27 </div> 28 29 <script> 30 trigger.click(); 31 trigger2.click(); 32 </script>