Menu

<menu class="menu">
  <h2 class="menu-title">Menu Title</h2>
  <hr />
  <span class="menu-item">normal</span>
  <span class="menu-item disabled">disabled</span>
  <span class="menu-checkbox checked">checkbox</span>
  <span class="menu-radio checked">radio</span>
  <hr />
  <span class="menu-item">
    <Bracket class="menu-icon" />
    custom left icon
  </span>
  <span class="menu-item">
    custom right icon
    <Bracket class="menu-icon-right" />
  </span>
  <hr />
  <span class="popover popover-hover menu-item">
    <span>Sub Menu</span>
    <div class="popover-content popover-left-top">
      <menu class="menu">
        <h3 class="menu-title">Sub Menu</h3>
        <hr />
        <span class="menu-item">it's 6pm but</span>
        <span class="menu-item">i miss u already</span>
      </menu>
    </div>
    <ChervonRight class="menu-icon-right" />
  </span>
</menu>

Note: .menu-checkbox and .menu-radio can be activated by &.checked, &.active or :checked + &.

Note: .menu-checkbox and .menu-radio can be disabled by &.disabled or :disabled + &.

Note: <hr /> can also be replaced with .menu-separator.