title: Material Design Lite Menu not working in google chrome
body: <p>The material design lite menu is working well in Internet Explorer and Firefox. However, the menu is not working properly in google chrome. The menu appears half in the google chrome but not in firefox and IE Here is the code I used</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout__header--scroll"&gt;
  
      &lt;header class="mdl-layout__header mdl-layout__header--waterfall"&gt;
          &lt;!-- Top row, always visible --&gt;
          &lt;div class="mdl-layout__header-row mdl-layout__header"&gt;
              &lt;span class="mdl-layout-title"&gt;&lt;strong&gt;FeteBird&lt;/strong&gt;&lt;img src="~/images/transfeteBirdLogo.png" width="50" height="50" /&gt;&lt;/span&gt;
  
              &lt;!-- Displayed on Computer and Tablet --&gt;
              &lt;!-- Search --&gt;
              &lt;div class="mdh-expandable-search mdl-cell--hide-phone"&gt;
                  &lt;form &gt;
                      &lt;input type="text" placeholder="Search for Product , Brands .."&gt;
                      &lt;button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" style="background: #009688; height: 40px;"&gt;
                          &lt;i class="material-icons" style="color: white"&gt;search&lt;/i&gt;
                      &lt;/button&gt;
  
                  &lt;/form&gt;
              &lt;/div&gt;
  
              
              &lt;div class="mdl-layout-spacer mdl-cell--hide-tablet mdl-cell--hide-desktop"&gt;&lt;/div&gt;
              &lt;div class="mdl-cell--hide-tablet mdl-cell--hide-desktop mdl-textfield mdl-js-textfield mdl-textfield--expandable
                    mdl-textfield--floating-label mdl-textfield--align-right"&gt;
                  &lt;label class="mdl-button mdl-js-button mdl-button--icon"
                         for="waterfall-exp"&gt;
                      &lt;i class="material-icons"&gt;search&lt;/i&gt;
                  &lt;/label&gt;
                  &lt;div class="mdl-textfield__expandable-holder"&gt;
                      &lt;input class="mdl-textfield__input" type="text" name="sample"
                             id="waterfall-exp"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Buttons --&gt;
              &lt;!-- Right aligned menu below button --&gt;
              &lt;button id="demo-menu-lower-right"
                      class="mdl-button mdl-js-button mdl-button--icon"&gt;
                  &lt;i class="material-icons"&gt;more_vert&lt;/i&gt;
              &lt;/button&gt;
  
              &lt;ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                  for="demo-menu-lower-right"&gt;
                  &lt;li class="mdl-menu__item"&gt;Mobile App&lt;/li&gt;
                  &lt;li class="mdl-menu__item"&gt;Customer Care&lt;/li&gt;
                  &lt;li class="mdl-menu__item"&gt;Track Order&lt;/li&gt;
                  &lt;li class="mdl-menu__item"&gt;Log in&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- Bottom row, not visible on scroll --&gt;
          &lt;div class="mdl-layout__header-row" style="height: 35px;"&gt;
              &lt;!-- Navigation --&gt;
              &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
              &lt;nav class="mdl-navigation"&gt;
                  &lt;a class="mdl-navigation__link" href=""&gt;Men&lt;/a&gt;
                  &lt;a class="mdl-navigation__link" href=""&gt;Women&lt;/a&gt;
              &lt;/nav&gt;
              &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      
      
      
      &lt;div class="mdl-layout__drawer mdl-layout--small-screen-only"&gt;
          &lt;span class="mdl-layout-title"&gt;&lt;img src="~/images/transfeteBirdLogo.png" width="80" height="80" /&gt;&lt;/span&gt;
          &lt;nav class="mdl-navigation"&gt;
              &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
              &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
              &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
              &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;main class="mdl-layout__content"&gt;
          &lt;div class="page-content"&gt;
        
              @RenderBody()
          &lt;/div&gt;
  
         
  
      &lt;/main&gt;
         
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>IE image </p>
  
  <p><a href="https://i.stack.imgur.com/krOFj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/krOFj.png" alt="internet explorer image"></a></p>
  
  <p>chrome image</p>
  
  <p><a href="https://i.stack.imgur.com/NjlV2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NjlV2.png" alt="chrome image"></a></p>