CSS菜单材质角度

Question

我有一个Material Angular的垂直菜单，我使用的是Angle 7，我想要自定义CSS，但是我的菜单没有显示有关主菜单的子菜单，我已经尝试使用z-index但什么也没有 子菜单没有显示在侧栏上方

作为图片

这是我的代码菜单html

<div>

现在这是我的CSS

<mat-sidenav-container class="sidenav-container"> 

<!-- terceiro menu personalizado -->
<div class="menu">
  <ul>
    <li><a routerLink="dashboard" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active"><mat-icon>home</mat-icon> Painel</a></li>
    <li><a routerLink="dashboard"><mat-icon>home</mat-icon> Dashboad</a></li>

    <li><a  routerLinkActive="active"><mat-icon>build</mat-icon> Ferramentas</a>
      <ul>
        <li><a routerLink="/dashboard/ferramentas">Ferramentas de Formulário</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
      </ul>
    </li>

    <li><a href="#">Financeiro</a></li>
    <li><a href="#">Marketing</a></li> 
  </ul>
</div>

如何在主菜单css上显示子菜单？如何在侧边栏上方显示子菜单？