title: Custom Styling Background Color for Mat-Menu in Angular Material
body: <p>I am trying to override some Material2 styling in my Angular 2 app and so far I'm not able to get it to work. Specifically, I want to override the background color for the md-menu. This is what my html looks like:</p>
  
  <pre><code>&lt;md-menu #menu="mdMenu" [overlapTrigger]="false" class="sub-drop-bg"&gt;
    &lt;button md-menu-item routerLink="option-A" class="sub-drop-item"&gt;Option A&lt;/button&gt;
  ...
  &lt;/md-menu&gt;
  </code></pre>
  
  <p>And this is what I've tried adding in my LESS/CSS:</p>
  
  <pre><code>md-menu.sub-drop-bg /deep/ {
    background-color: #555 !important;
  }
  </code></pre>
  
  <p>So far this seems to have no effect. The default <code>#fff</code> background-color still shows up for the md-menu background.</p>
  
  <p>As additional info, when I hover over and inspect element, I see the default <code>mat-menu-content</code> class as being styled with the white background, like this:</p>
  
  <pre><code>.mat-menu-content {
      background: #fff;
  }
  </code></pre>
  
  <p>I've tried adding that class to my component CSS, and using it to override the background-color, also to no avail. If I "de-select" that color for that class in my browser console, the background color goes away (becomes transparent). But, as I say, adding that class and overriding the color in my CSS doesn't override the white color when I reload.</p>
  
  <p>How can I accomplish this with CSS alone?</p>