Выпадающее меню AngularJs-menu, содержащее кнопку меню меню

Question

В моем раскрывающемся меню отображается скрытая кнопка, любая идея, как ее исправить? Я хочу, чтобы он появился прямо под моей кнопкой выпадающего меню. Я пробовал создать класс и стиль его в css как «position: absolute»; но он не работает. Вот мой код в угловой:

<div ng-controller="Ctrll" ng-app="Fruit"> 

    <div> 
    <md-menu> 
     <md-button ng-click="$mdOpenMenu()">Fruits 
     </md-button> 
     <md-menu-content class="dropdown" > 

     <md-menu-item > 
         <md-button ng-click="apple()">Apple</md-button> 
         </md-menu-item> 
         <md-menu-item> 
         <md-button ng-click="blueberry()">Blueberry </md-button> 
         </md-menu-item> 
     </md-menu> 
     </md-menu-content>  
    </div> 
</div> 

вот мой Угловая приложение

angular 
    .module('Fruit',['ngMaterial']) 


    .controller('Ctrll', function() { 
    var originatorEv; 

    this.openMenu = function($mdOpenMenu, ev) { 
     originatorEv = ev; 
     $mdOpenMenu(ev); 
    }; 
}); 

Я добавил его в codepen. Вот как выглядит мой код в действии. http://codepen.io/zcook/pen/YqramL

Кроме того, кто-нибудь знает, как изменить цвет фона выпадающего меню?

Answer 1

Почему вы не можете изменить свойство CSS класса .md-open-menu-container.md-active?

.md-open-menu-container.md-active{ 
    top: 45px !important; 
} 

Проверить этот обновленный codepen