Material design 具体化边栏

我在angular上做了一个小演示，但首先我在做我的设计部分。 我正在使用物化CSS。 这是我的密码：

    <nav class="blue z-depth-1">      
        <div class="nav-wrapper">
              <a  class="brand-logo " (click)="toggleSideBar()">
                   <i class="material-icons">menu</i> Demo
              </a>                 
        </div>
      </nav>
     <ul  id="slide-out" class="side-nav fixed z-depth-1 collapsible" data-collapsible="accordion">


       <li class="bold">
        <ul class="collapsible collapsible-accordion">

              <li class="bold">
                    <a class="collapsible-header  waves-effect waves-default">
                         <i class="material-icons prefix">dashboard</i>Dashboard</a>

              </li>
              <li class="bold">
                    <a class="collapsible-header  waves-effect waves-default">
                          <i class="material-icons">face</i>Employee Master
                    </a>
                    <div class="collapsible-body">
                    <ul>
                          <li><a href="badges.html">test</a></li>
                          <li><a href="buttons.html">test</a></li>
                          <li><a href="breadcrumbs.html">test</a></li>

                    </ul>
                   </div>
              </li>

      </ul>
      </li>

这是我面临的问题，请参考我的图片

---

首先感谢您发布代码笔。我已经完成了你的工作，并制作了我自己的边栏导航演示，它按照你想要的方式工作

我更改的内容列表如下所示

最新的物化css和js版本https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css 和https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js 添加了一堆css，使其看起来像参考链接中显示的一样

//标记的整体填充已更改 .side nav li>a{padding:0 15px；}

//图标和文本之间的填充已更改 .side nav li>a>i、.side nav li>a>[class^=mdi-]，.side nav li>a li>a>[class*=mdi-]，.side nav li>a>i.material-icons{margin:0 15px 0；}

//可折叠列表的对齐 侧面导航可折叠体{填充：0 30px；}

在下面的codepen链接中提供了HTML代码以及工作演示：

---

希望这能解决您的问题。

在codepen上演示上述代码，我将帮助您解决问题。我已经做了一个小演示，请在此处查看。问题是，我用angular 2和Materialize制作了一个演示，并且在代码笔上，当我制作一个演示时，我得到了我的侧边栏的不同布局。我希望实现侧边栏，就像我在这里找到的一样，如果你能指导我在这个链接中找到的侧边栏和菜单的设计：这是很有帮助的，但当我将可折叠体悬停在鼠标上时，它只覆盖填充区域。如何使整个区域成为可点击区域？就像我们的示例中的最后一个可折叠标题下拉列表一样，带有选项First second Third Fourth

`http://codepen.io/nirajtech/pen/bWQMRE`