menuitem-anchor-positioning-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<link rel=stylesheet href=resources/menu-elements-styles.css>

<style>

  /* Only buttons can trigger popovers, so style buttons like menuitems, and

   * reset some of their default styles. */

  button {

    box-sizing: content-box;

    font-size: unset;

    font-family: unset;

    text-align: unset;

    background: unset;

    border: 0;

</style>

<div class=menubar>

  <div class=menuitem>Nothing</div>

  <button class=menuitem id=trigger popovertarget=top-menulist>Trigger</button>

</div>

<div popover class="menulist menulist-with-menubar-anchor" id=top-menulist>

  <button class=menuitem id=trigger2 popovertarget=sub-menulist>Trigger 2</button>

</div>

<div popover class="menulist menulist-with-menulist-anchor" id=sub-menulist>

  <div class=menuitem>Most nested item</div>

</div>

<script>

  trigger.click();

  trigger2.click();

</script>