배경색 변경 재료 디자인

Question

재료 디자인 라이트를 사용하여 메뉴의 배경을 검정색과 전면 흰색으로 만들려고합니다.

하지만 배경색은 메뉴에 내용이있는 장소 만 검정색으로 변하고 다른 곳은 기본 색상입니다.

여기 LOOK --- 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> 

,369 되세요

어떻게 전체 메뉴의 배경을 검정색으로하고 텍스트 색을 흰색으로 만들 수 있습니까?

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