背景颜色变化材质设计

Question

使用材质设计精简版我正在尝试使菜单的背景为黑色，正面为白色。

但是背景颜色只是为菜单有内容的地方变黑，其他地方则是默认颜色！

看看这里--- https://codepen.io/anon/pen/pbKVko

 </header> 
     <div class="mdl-layout__drawer"> 
     <span class="mdl-layout-title">Chris</span> 
     <nav class="mdl-navigation" id="left_menu"> 
      <a class="mdl-navigation__link" href="">Dashboard</a> 
      <a class="mdl-navigation__link" href="">Cost & Sales</a> 
      <a class="mdl-navigation__link" href="">Budget</a> 
      <a class="mdl-navigation__link" href="">Analysis</a> 
     </nav> 
     </div> 
     <main class="mdl-layout__content"> 
     <div class="page-content"><!-- Your content goes here --></div> 
     </main> 
    </div> 
    </body> 

    <style> 
     #left_menu{ 
      background-color: black; 
      color: white; 
     } 
    </style> 

我怎样才能使整个菜单的背景黑色和文本颜色白色！

这是我的CSS -

 #left_menu{ 
      background-color: black; 
      color: white; 
     } 

有谁知道如何解决这个问题！

Answer 1

这应该做的。

.mdl-layout__drawer { 
    background: #000; 
    color: #fff; // for the header of that menu 
} 
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover { 
    color: #fff; // links 
}