背景顏色變化素材設計

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
}