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
}

背景颜色改变材料设计

1 个答案: