Angularjs與材料設計md-menu-item垂直問題

Question

我按照angularjs材質的演示創建菜單。在演示菜單中是垂直的，因爲它是動態的。但是，如果我手動創建相同的菜單，然後創建水平。

我的一些代碼

<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