Submenu inside lightning:buttonMenu component

By | August 10, 2018

I have a lightning:buttonMenu with a few lightning:menuItem and want to display a submenu when hovering over one of the options. Having a hard time understanding how to create a submenu.

Was thinking along the lines to have a lightning:buttonMenu nested inside a lightning:menuItem.

<lightning:buttonMenu>
 <lightning:menuItem label="Testing" onmouseover="{!c.doSomething?}">
   <lightning:buttonMenu aura:id="test">
    <lightning:menuItem label="One"/>
    <lightning:menuItem label="Two"/>
    <lightning:menuItem label="Three"/>
   </lightning:buttonMenu>
 </lightning:menuItem>
</lightning:buttonMenu>

Documentation : https://developer.salesforce.com/docs/component-library/bundle/lightning:buttonMenu/documentation