Angularjs 和 Material 设计 md-menu-item 垂直问题

Question

我正在按照 angularjs material 的演示创建菜单。在演示菜单中是垂直的，因为它是动态的。但是如果我手动创建相同的菜单，那么它正在创建水平。

我的一些代码

<md-toolbar>
                    <div class="md-toolbar-tools">
                        <md-menu md-position-mode="target-left bottom"  md-offset="-22 6">
                            <md-button aria-label="Plan & Book" ng-click="$mdOpenMenu($event)">
                                Parent Item 1
                            </md-button>
                            <md-menu-content width="4">
                                <md-menu-item>
                                    <md-button>Item 1</md-button>
                                    <md-button>Item 2</md-button>
                                    <md-button>Item 3</md-button>
                                </md-menu-item>
                            </md-menu-content>
                        </md-menu>
                        <md-menu>
                            <md-button aria-label="Manage A Booking" ng-click="$mdOpenMenu($event)">
                                Parent Item 2
                            </md-button>
                            <md-menu-content class="dropdown">
                            </md-menu-content>
                        </md-menu>
                    </div>
                </md-toolbar>

我的全码笔 http://codepen.io/milindsaraswala/pen/dXvVOa

如何使它成为垂直菜单!!

Answer 1

你必须分开 <md-menu-item>:

<md-menu-item>
    <md-button>Item 1</md-button>
</md-menu-item>
<md-menu-item>
    <md-button>Item 2</md-button>
</md-menu-item>
<md-menu-item>
    <md-button>Item 3</md-button>
</md-menu-item>

您的代码已更新：http://codepen.io/anon/pen/beqaqZ

Angularjs 和 Material 设计 md-menu-item 垂直问题

Angularjs with Material design md-menu-item Vertical issue

html

css

angularjs

angularjs-material