背景顏色變化材質設計

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 
}