Complex Menu

<button popovertarget="main-menu">Complex Menu</button>

<div id="main-menu" popover style="min-width: 200px">
  <menu>
    <li><small>File</small></li>
    <li>
      <button class="ghost">
        <svg><!-- file --></svg> New File
        <kbd class="shortcut">⌘N</kbd>
      </button>
    </li>
    <li>
      <button class="ghost">
        <svg><!-- folder --></svg> New Folder
        <kbd class="shortcut">⇧⌘N</kbd>
      </button>
    </li>
    <li>
      <button class="ghost" popovertarget="recent-menu">
        <svg><!-- folder-open --></svg> Open Recent
      </button>
      <div id="recent-menu" popover data-placement="right top">
        <menu>
          <li><small>Recent Projects</small></li>
          <li>
            <button class="ghost">
              <svg><!-- file --></svg> Project Alpha
            </button>
          </li>
          <li>
            <button class="ghost">
              <svg><!-- file --></svg> Project Beta
            </button>
          </li>
          <li><hr /></li>
          <li>
            <button class="ghost" popovertarget="more-projects-menu">
              <svg><!-- dots --></svg> More Projects
            </button>
            <div id="more-projects-menu" popover data-placement="right top">
              <menu>
                <li>
                  <button class="ghost">
                    <svg><!-- file --></svg> Project Gamma
                  </button>
                </li>
                <li>
                  <button class="ghost">
                    <svg><!-- file --></svg> Project Delta
                  </button>
                </li>
              </menu>
            </div>
          </li>
          <li>
            <button class="ghost">
              <svg><!-- folder-open --></svg> Browse&hellip;
            </button>
          </li>
        </menu>
      </div>
    </li>
    <li><hr /></li>
    <li>
      <button class="ghost">
        <svg><!-- device-floppy --></svg> Save
        <kbd class="shortcut">⌘S</kbd>
      </button>
    </li>
    <li>
      <button class="ghost">
        <svg><!-- download --></svg> Export
        <kbd class="shortcut">⇧⌘E</kbd>
      </button>
    </li>
    <li><hr /></li>
    <li><small>View</small></li>
    <li>
      <label>
        <input type="checkbox" name="sidebar" checked />
        <svg><!-- layout-sidebar --></svg> Show Sidebar
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="statusbar" />
        <svg><!-- layout-bottombar --></svg> Show Status Bar
      </label>
    </li>
    <li>
      <button class="ghost" popovertarget="theme-menu">
        <svg><!-- palette --></svg> Theme
      </button>
      <div id="theme-menu" popover data-placement="right top">
        <menu>
          <li><small>Appearance</small></li>
          <li>
            <label>
              <input type="radio" name="appearance" checked />
              <svg><!-- sun --></svg> Light
            </label>
          </li>
          <li>
            <label>
              <input type="radio" name="appearance" />
              <svg><!-- moon --></svg> Dark
            </label>
          </li>
          <li>
            <label>
              <input type="radio" name="appearance" />
              <svg><!-- monitor --></svg> System
            </label>
          </li>
        </menu>
      </div>
    </li>
    <li><hr /></li>
    <li><small>Account</small></li>
    <li>
      <button class="ghost">
        <svg><!-- user --></svg> Profile
        <kbd class="shortcut">⇧⌘P</kbd>
      </button>
    </li>
    <li>
      <button class="ghost">
        <svg><!-- credit-card --></svg> Billing
      </button>
    </li>
    <li>
      <button class="ghost" popovertarget="settings-menu">
        <svg><!-- settings --></svg> Settings
      </button>
      <div id="settings-menu" popover data-placement="right top">
        <menu>
          <li><small>Preferences</small></li>
          <li>
            <button class="ghost">
              <svg><!-- keyboard --></svg> Keyboard Shortcuts
            </button>
          </li>
          <li>
            <button class="ghost">
              <svg><!-- language --></svg> Language
            </button>
          </li>
          <li>
            <button class="ghost" popovertarget="notifications-menu">
              <svg><!-- bell --></svg> Notifications
            </button>
            <div id="notifications-menu" popover data-placement="right top">
              <menu>
                <li><small>Notification Types</small></li>
                <li>
                  <label>
                    <input type="checkbox" checked />
                    <svg><!-- bell --></svg> Push Notifications
                  </label>
                </li>
                <li>
                  <label>
                    <input type="checkbox" checked />
                    <svg><!-- mail --></svg> Email Notifications
                  </label>
                </li>
              </menu>
            </div>
          </li>
          <li><hr /></li>
          <li>
            <button class="ghost">
              <svg><!-- shield --></svg> Privacy &amp; Security
            </button>
          </li>
        </menu>
      </div>
    </li>
    <li><hr /></li>
    <li>
      <button class="ghost">
        <svg><!-- help-circle --></svg> Help &amp; Support
      </button>
    </li>
    <li>
      <button class="ghost">
        <svg><!-- file-text --></svg> Documentation
      </button>
    </li>
    <li><hr /></li>
    <li>
      <button class="ghost destructive">
        <svg><!-- logout --></svg> Sign Out
        <kbd class="shortcut">⇧⌘Q</kbd>
      </button>
    </li>
  </menu>
</div>