html - Angular Navbar Menu - 将菜单项与子菜单对齐

Question

我正在尝试将菜单项与子菜单对齐。例如D Title有2个字幕，分别为D Subtitle 1和D Subtitle 2，并且它们都有内部标题。但是当我将鼠标悬停在 D Subtitle 2 上时，内部菜单未与其对齐。我已经尝试过 innermenu 类的 relative 和 absolute 但它不起作用。我怎样才能实现它？

源代码:https://stackblitz.com/edit/angular-ivy-tzksqa

navbar.component.html

<div class="header" *ngFor='let menu of navigationService.navMenu'>
    <div class="header-title" (mouseover)="navigationService.openMenu(menu)">
        <p>{{menu.title}}</p>
    </div>

    <div [hidden]="!menu.isOpen">
        <div class="submenu" *ngIf="menu.menu">
            <span *ngFor="let submenu of menu.menu">
                <div class="submenu-item" (mouseover)="navigationService.openSubMenu(submenu)">
                    <p>{{submenu.title}}</p>
                </div>
            </span>
        </div>
    </div>

    <div *ngIf="menu.menu">
        <span *ngFor="let submenu of menu.menu">
            <div [hidden]="!submenu.isOpen">
                <div class="innermenu" *ngIf="submenu.innerMenu">
                    <span *ngFor="let innerMenuItem of submenu.innerMenu">
                        <div class="innermenu-item">
                            <p *ngIf="innerMenuItem.title">{{innerMenuItem.title}}</p>
                        </div>
                    </span>
                </div>
            </div>
        </span>
    </div>
</div>

navbar.component.less

:host {
    position: absolute;
    top: 0;
    left: 0;
    width: 400x;
    background-color: black;
    color: white;
    border-bottom: 5px solid black;
    font-size: 20px;

    .header {
        display: inline-block;
        position: relative;
        height: 40px;
        white-space: nowrap;
        padding: 0 10px;

        .header-title {
            line-height: 40px;

            & > p {
                display: inline-block;
                margin: 0 4px 0 8px;
            }
        }
    }

    .submenu {
        display: inline-block;
        position: absolute;
        top: 40px;
        left: 0;
        width: 150px;
        background-color: black;
        padding: 6px 0;

        .submenu-item {
            position: relative;
            padding: 5px 8px;
            
            & > p {
                display: inline-block;
                margin: 0 4px 0 8px;
            }
        }
    }

    .innermenu {
        display: inline-block;
        position: absolute;
        top: 40px;
        left: 150px;
        width: 150px;
        padding: 6px 0;
        background-color: black;

        .innermenu-item {
            position: relative;
            padding: 5px 8px;

            & > p {
                display: inline-block;
                margin: 0 4px 0 8px;
            }
        }
    }
}

Answer 1

https://stackblitz.com/edit/angular-ivy-hgzrej

当您在父 div 中创建子级时，

absolute 将起作用。您的循环也被重复。我删除那部分。实现多级子菜单，您可以保持嵌套树结构。

注意:具有 position:absolute; 的元素相对于最近定位的祖先定位(而不是相对于视口(viewport)定位，如固定)。

变化:

 .innermenu {
  top:-2px;
} 

<div class="header" *ngFor='let menu of navigationService.navMenu'>
   <div class="header-title" (mouseover)="navigationService.openMenu(menu)">
      <p>{{menu.title}}</p>
   </div>
   <div [hidden]="!menu.isOpen">
      <div class="submenu" *ngIf="menu.menu">
         <span *ngFor="let submenu of menu.menu">
            <div class="submenu-item" (mouseover)="navigationService.openSubMenu(submenu)">
               <p>{{submenu.title}}</p>
               
                   
                     <div [hidden]="!submenu.isOpen">
                        <div class="innermenu" *ngIf="submenu.innerMenu">
                           <span *ngFor="let innerMenuItem of submenu.innerMenu">
                              <div class="innermenu-item">
                                 <p *ngIf="innerMenuItem.title">{{innerMenuItem.title}}</p>
                              </div>
                           </span>
                        </div>
                     </div>
                   
              
            </div>
         </span>
      </div>
   </div>
</div>