lightning:menuItem in lightning:buttonMenu is not working in a nested component

Question

I have two lightning components. One gets account's basic information on load and iterates over it and another displays the each account's basic information in a row. I have explained the div tag after the code snippet

Here's the code: viewAccountsList.cmp

<aura:iteration items="{!v.accountsList}" var="account" indexVar="i">
   <c:accountListItem account="{!account}" />
</aura:iteration>

 <div class="slds-truncate" title="Actions">
    <lightning:buttonMenu alternativeText="Toggle menu">
        <lightning:menuItem label="Some Account Action" value="someAction" iconName="utility:table" />
     </lightning:buttonMenu>
 </div>

accountListItem.cmp

<table class="slds-table slds-table_bordered">
<thead>
     <th scope="col">
         <div class="slds-truncate slds-text-heading_small" title="Account Name">Account Name</div>
      </th>
      <th scope="col">
          <div class="slds-truncate slds-text-heading_small" title="Account Status">Account Status</div>
       </th>
       <th scope="col">
           <div class="slds-truncate slds-text-heading_small" title="Account Balance">Account Balance</div>
       </th>
       <th scope="col">
       <div class="slds-truncate slds-text-heading_small" title="Account Balance">Actions</div>
       </th>
</thead>
<tbody>
    <td data-label="Account Name">
        <div class="slds-truncate" title="Account Name">
                    {!v.account.name}
        </div>
    </td>
    <td data-label="Account Status">
         <div class="slds-truncate" title="Account Status">{!v.account.status}</div>
    </td>
    <td data-label="Account Balance">
        <div class="slds-truncate" title="Account Balance">{!v.account.balance}</div>
     </td>
    <td data-label="Account Balance">
        <div class="slds-truncate" title="Actions">
            <lightning:buttonMenu alternativeText="Toggle menu">
                <lightning:menuItem label="Some Account Action" value="someAction" iconName="utility:table" />
         </lightning:buttonMenu>
        </div>
     </td>
</tbody>
</table>

I want to add a lightning:buttonMenu to do additional operations on the account in the child component. The last div tag in the child component doesn't show the menuItem but the same div tag in the parent component does.

Why is this happening?

Answer 1

<td data-label="Account Balance">
    <div class="slds-truncate" title="Actions">
        <lightning:buttonMenu alternativeText="Toggle menu">
            <lightning:menuItem label="Some Account Action" value="someAction" iconName="utility:table" />
     </lightning:buttonMenu>
    </div>
 </td>

In this block you are using class="slds-truncate" thats why it truncate the buttonMenu,

If you wanna show the buttonMenu, simply remove slds-truncate class.