背景色の変更材料のデザイン

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> 

メニュー全体の背景を黒く、テキストの色を白にするにはどうすればいいですか？

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

誰もがこの問題を解決する方法を知っている -

これは私のCSSです！

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 
}