AngularJs 下拉菜单内容覆盖菜单按钮

Question

我的下拉菜单内容覆盖了我的下拉按钮，知道如何解决吗？我希望它直接出现在我的下拉按钮下方。我尝试创建一个类并将其在 CSS 中设置为“位置：绝对；”但它不起作用。 这是我的角度代码：

<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 应用程序

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

为什么不能更改 .md-open-menu-container.md-active 类的 CSS 属性？

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

查看此更新的codepen