title: md-menu override default max-width in Angular 2
body: <p>I'm  using Angular 2 , Angular Material and I am willing to display more data in a md-menu and, therefore, I need to set the max-width of the md-menu to a higher value. Its default value is of 280px.</p>
  
  <pre><code>    &lt;img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/&gt; 
      &lt;md-menu #appMenu="mdMenu"  [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown"&gt;
          &lt;button md-menu-item &gt;
             &lt;div class="row notification-row"&gt; 
               &lt;div&gt;
                 &lt;span class="image-container"&gt; Option 1 &lt;/span&gt;
               &lt;/div&gt;
             &lt;/div&gt;
          &lt;/button&gt;
      &lt;/md-menu&gt;   
  </code></pre>
  
  <p>In CSS file, I do this:</p>
  
  <pre><code>.mat-menu-panel.notifications-dropdown {
      max-width:none;
      width: 100vw; 
      margin-left: -8px;
      margin-top: 24px;
      overflow: visible;
  }
  
  .notification-row{
      width: 424px;
  }
  </code></pre>
  
  <p>In console, I can identify the class where the default value is set: <code>max-width:280px;</code> , and when I edit it in my console, it works perfectly, but even though I try to override it in my CSS code, I am not able to do that. I tried this, also:</p>
  
  <pre><code>.mat-menu-panel{
      max-width: 600px;
  } 
  </code></pre>
  
  <p>And this:</p>
  
  <pre><code>.cdk-overlay-container .mat-menu-panel{
       max-width:600px;
      width: 100vw;
      margin-left: -8px;
      margin-top: 24px;
  }
  </code></pre>
  
  <p>How can I override this default value?</p>