Here is the HTML code I currently have:
<li *ngFor="let menu of menus" class="{{ menu.attributes.class }} menu-items" [attr.data-title]="menu.label">
<a [routerLink]="[menu.url||'/']" [queryParams]="menu.refParameter3 ? menu.refParameter3:{}"(click)="clicked = true;selectMenu(menu)">
<i *ngIf="menu.icon" class="{{menu.icon}}"></i>
<span>{{menu.label}}</span>
<i *ngIf="menu.children && menu.children.length" class="subarrow fa fa-angle-right"></i>
</a>
<z-menu class="childrens" *ngIf="menu.children && menu.children.length" [menus]="menu.children" [parent]="menu.label"></z-menu>
</li>
In my CSS file, this is what I have defined:
.menu-items:hover::before {
content: attr(data-title);
position: absolute;
bottom: -80px;
display: inline-block;
padding: 0px 6px;
border-radius: 2px;
background: #fff;
color: gray;
font-size: 11px;
font-family: sans-serif;
white-space: nowrap;
z-index: 999;
height: 30px;
min-width: 100px;
left: 17px;
text-align: center;
line-height: 30px;
font-weight: bold;
border: 1px solid gray;
visibility: 1s
}
I am looking for a way to hide the before content on the parent element when hovering over an li element that has the 'childrens' class as its parent. Any suggestions?