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

Question

我的下拉菜单内容覆盖了我的下拉按钮，知道如何解决吗？我希望它直接出现在我的下拉按钮下方。我尝试创建一个 class 并在 CSS 中将其设置为 "position: absolute;"，但它不起作用。这是我在 angular:

中的代码

<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

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

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

检查此更新codepen

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

AngularJs dropdown menu-content covering menu button

angularjs

drop-down-menu

angularjs-material