<div class="table" [style.width]="screenWidth+'px'">
  <div class="top-bar">
    <div class="top-menu-list" [style.width]="100*menuList.length+'px'">
      <div *ngFor="let menu of menuList;let i=index"
           (mouseenter)="menu.showChildren=true"
           (mouseleave)="menu.showChildren=false"
           (click)="setActive(i)"
           class="top-menu-item">
            <!--[ngClass]="{'top-menu-item-active':curPath==menu.path}"-->
            <div class="top-menu-item" routerLink="{{
            (menu.children && menu.children.length)?
            (menu.path+'/'+menu.defaultChildPath):menu.path
            }}">{{menu.title}}
            </div>
            <div class="top-child-box"
                 [ngStyle]="{'left':i*100+'px'}"
                 *ngIf="menu && menu.showChildren && menu.children && menu.children.length">
              <div *ngFor="let childMenu of menu.children;let j=index"
                   routerLink="{{menu.path+'/'+childMenu.path}}"
                   (click)="setActive(i)"
                   [ngClass]="{'top-child-item-active': curParent==menu.path && curChild==childMenu.path}"
                   class="top-child-item">{{childMenu.title}}
              </div>
            </div>
      </div>
      <div class="top-menu-item-active"
           (mouseenter)="menuList[curPathIndex]?menuList[curPathIndex].showChildren=true:''"
           (mouseleave)="menuList[curPathIndex]?menuList[curPathIndex].showChildren=false:''"
      ></div><!--[ngStyle]="{'left':100*curPathIndex+'px'}"-->
    </div>
  </div>
  <div class="top-padding"></div>
</div>
