@momentum-ui/react-collaboration/scss/components/menu/examples/sub-menu.html

Cisco Momentum UI Framework for React Collaboration Applications

<div class="md-event-overlay md-event-overlay--arrow md-event-overlay--bottom md-menu-overlay">
  <div class="md-event-overlay__arrow" style="left: 250.93px; top: 684px;"></div>
  <div class="md-event-overlay__children" style="top: 684px; left: 189px;">
    <div class="md-menu-content">
      <span class="md-editable-textfield md-editable-textfield--left"><div role="button" tabindex="0" class="md-editable-textfield__button">Content Area</div></span>
    </div>
    <div class="md-menu md-menu-item-container" aria-label="" role="menubar">
      <div class="md-menu-item" aria-expanded="true" aria-haspopup="true">
        <div aria-current="false" class="md-list-item active" id="md-list-item-31" role="menuitem" tabindex="-1">
          <div class="md-menu-item__content">Status</div>
          <div class="md-menu-item__selected-value" title="Out of office until 2:00pm">Out of office until 2:00pm</div>
          <div class="md-menu-item__arrow">
            <i class="md-icon icon icon-arrow-right_16" width="16" height="16"></i>
          </div>
        </div>
        <div class="md-event-overlay md-event-overlay--right">
          <div class="md-event-overlay__children" style="top: 741px; left: 435.688px;">
            <div aria-label="Status" role="menu" class="md-menu-item-container">
              <div class="md-menu-item" aria-expanded="false" aria-haspopup="false">
                <div aria-current="false" class="md-list-item md-list-item--read-only md-menu-item__header" id="md-list-item-36" role="menuitem">Set Do Not Disturb:</div>
              </div>
              <div class="md-menu-item" aria-expanded="false" aria-haspopup="false">
                <div aria-current="false" class="md-list-item disabled" id="md-list-item-37" role="menuitem" tabindex="-1">1 hour</div>
              </div>
              <div class="md-menu-item" aria-expanded="false" aria-haspopup="false">
                <div aria-current="true" class="md-list-item" id="md-list-item-38" role="menuitem" tabindex="0">5 hour</div>
              </div>
              <div class="md-menu-item" aria-expanded="false" aria-haspopup="false">
                <div aria-current="false" class="md-list-item" id="md-list-item-39" role="menuitem" tabindex="-1">8 hour</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="md-menu-item" aria-expanded="false" aria-haspopup="true">
        <div aria-current="false" class="md-list-item" id="md-list-item-33" role="menuitem" tabindex="-1">
          <div class="md-menu-item__content">Language</div>
          <div class="md-menu-item__selected-value" title="English">English</div>
          <div class="md-menu-item__arrow">
            <i class="md-icon icon icon-arrow-right_16" width="16" height="16"></i>
          </div>
        </div>
      </div>
      <div class="md-menu-item" aria-expanded="false" aria-haspopup="false"><div aria-current="false" class="md-list-item" id="md-list-item-35" role="menuitem" tabindex="-1">Settings</div></div>
    </div>
  </div>
</div>