Hintergrund Farbwechsel Material Design

Question

Mit Material Design Lite versuche ich den Hintergrund des Menüs schwarz und die Front weiß zu machen.

Aber die Hintergrundfarbe wird nur schwarz für die Stelle, an der das Menü Inhalt hat, andere Orte ist es Standardfarbe!

Haben Sie einen Blick hier --- 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> 

Wie kann ich den Hintergrund des gesamten Menüs schwarz und die Textfarbe weiß machen?

das ist mein CSS -

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

jemand weiß, wie dieses Problem zu lösen!

Answer 1

Dies sollte tun.

.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 
}