I've created a lightning component which has a menu and this is how it opens:
<table class="slds-table slds-table_bordered selected-apps-table slds-table_fixed-layout">
<thead>
<th class="slds-text-title_caps" style="width: 25%;">App</th>
<th class="slds-text-title_caps">Category</th>
<th class="slds-text-title_caps">Rating</th>
<th class="slds-text-title_caps">Status Demand</th>
<th class="slds-text-title_caps">Status Supply</th>
<th class="slds-text-title_caps" style="width: 5%;"></th>
</thead>
<tbody>
<aura:iteration items="{!dev.selectedApps}" var="app">
<tr>
<td class="slds-truncate"><img src="{!app.icon}" class="app-icon"/><span class="app-name"><a href="#" target="_blank">{!app.name}</a></span></td>
<td class="slds-truncate">{!app.category}</td>
<td class="slds-truncate">
<aura:iteration start="0" end="{!app.rating}" items="1,2,3,4,5" var="index">
<lightning:icon iconName="utility:favorite" alternativeText="star" size="x-small">
</lightning:icon>
</aura:iteration>
</td>
<td class="slds-truncate">{!app.demand_status}</td>
<td class="slds-truncate">{!app.supply_status}</td>
<td>
<lightning:buttonMenu class="{!app.app_id}" onselect="{!c.itemSelectedOnSelectedApps}" aura:id="selected-apps-menu" alternativeText="Show menu" menuAlignment="auto" iconSize="x-small" variant="bare">
<aura:if isTrue="{!v.sObjectName != 'Account'}">
<lightning:menuItem value="removeFromSelected" label="Remove From Selected" prefixIconName="utility:clear"/>
</aura:if>
<lightning:menuItem value="createTask" label="Create Task" prefixIconName="utility:edit"/>
<aura:if isTrue="{!v.sObjectName != 'Lead'}">
<lightning:menuItem value="createWishlist" label="Create Wishlist" prefixIconName="utility:topic"/>
</aura:if>
</lightning:buttonMenu>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
I tried to add z-index with !important but it doesn't work. I realized it's not possible to override css of standard components.
Is there any workaround ?
