javascript - Material Design Lite 菜单在谷歌浏览器中不起作用

Question

Material 设计精简菜单在 Internet Explorer 和 Firefox 中运行良好。但是，菜单在谷歌浏览器中无法正常工作。菜单在 google chrome 中出现了一半，但在 firefox 和 IE 中没有出现这是我使用的代码

    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout__header--scroll">

    <header class="mdl-layout__header mdl-layout__header--waterfall">
        <!-- Top row, always visible -->
        <div class="mdl-layout__header-row mdl-layout__header">
            <span class="mdl-layout-title"><strong>FeteBird</strong><img src="~/images/transfeteBirdLogo.png" width="50" height="50" /></span>

            <!-- Displayed on Computer and Tablet -->
            <!-- Search -->
            <div class="mdh-expandable-search mdl-cell--hide-phone">
                <form >
                    <input type="text" placeholder="Search for Product , Brands ..">
                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" style="background: #009688; height: 40px;">
                        <i class="material-icons" style="color: white">search</i>
                    </button>

                </form>
            </div>

            
            <div class="mdl-layout-spacer mdl-cell--hide-tablet mdl-cell--hide-desktop"></div>
            <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">
                <label class="mdl-button mdl-js-button mdl-button--icon"
                       for="waterfall-exp">
                    <i class="material-icons">search</i>
                </label>
                <div class="mdl-textfield__expandable-holder">
                    <input class="mdl-textfield__input" type="text" name="sample"
                           id="waterfall-exp">
                </div>
            </div>

            <!-- Buttons -->
            <!-- Right aligned menu below button -->
            <button id="demo-menu-lower-right"
                    class="mdl-button mdl-js-button mdl-button--icon">
                <i class="material-icons">more_vert</i>
            </button>

            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                for="demo-menu-lower-right">
                <li class="mdl-menu__item">Mobile App</li>
                <li class="mdl-menu__item">Customer Care</li>
                <li class="mdl-menu__item">Track Order</li>
                <li class="mdl-menu__item">Log in</li>
            </ul>
        </div>
        <!-- Bottom row, not visible on scroll -->
        <div class="mdl-layout__header-row" style="height: 35px;">
            <!-- Navigation -->
            <div class="mdl-layout-spacer"></div>
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="">Men</a>
                <a class="mdl-navigation__link" href="">Women</a>
            </nav>
            <div class="mdl-layout-spacer"></div>
        </div>
    </header>
    
    
    
    <div class="mdl-layout__drawer mdl-layout--small-screen-only">
        <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="80" height="80" /></span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
        </nav>
    </div>
    <main class="mdl-layout__content">
        <div class="page-content">
      
            @RenderBody()
        </div>

       

    </main>
       
</div>

IE 图片

Chrome 图像

Answer 1

修改MDL的css

.mdl-layout__header--waterfall{
    overflow: visible;
}

这对我来说很好用。从此链接找到答案 - https://github.com/google/material-design-lite/issues/4222