Я хотел бы сделать так, чтобы при нажатии кнопки циновки пункты меню имели одинаковый размер и давили все остальное вниз.Ниже прилагаются изображения текущей ситуации и желаемого.
Текущее закрытое раскрывающееся меню
Текущее открытое раскрывающееся меню
Желаемый закрытый выпадающий список
Вот мой HTML-код:
<mat-footer>
<div class="footerLinks">
<span *ngFor="let footerLink of footerContent.footerLinks">
<span *ngIf="footerLink.footerDrop.length > 1 else single">
<a mat-button [matMenuTriggerFor]="subLinks" href="javascript:void(0)" title={{footerLink.subFooterTitle}}>{{footerLink.subFooterTitle}}
<mat-icon>arrow_drop_down</mat-icon>
</a>
<mat-menu #subLinks="matMenu" arrowPosition="up">
<a mat-menu-item *ngFor="let footerDrop of footerLink.footerDrop" href={{footerDrop.subLink}} target={{footerDrop.linktarget}} title={{footerDrop.footerSubTitle}}>{{footerDrop.footerSubTitle}}</a>
</mat-menu>
</span>
<ng-template #single >
<a mat-button *ngFor="let footerDrop of footerLink.footerDrop" href={{footerDrop.subLink}} target={{footerDrop.linktarget}} title={{footerDrop.footerSubTitle}}>{{footerDrop.footerSubTitle}}</a>
</ng-template>
</span>
</div>
<div class="social">
<span *ngFor="let socialLink of footerContent.socialLinks">
<a mat-flat-button class="{{socialLink.socialMediaService}}-icon" href={{socialLink.url}} title={{socialLink.socialMediaService}} target={{socialLink.linktarget}}></a>
</span>
</div>
<div class="terms">
<mat-copywrite-footer [innerHTML]="footerContent.finePrint.value"> </mat-copywrite-footer>
</div>
</mat-footer>