Question

我的下拉菜单内容覆盖了我的下拉按钮，任何想法如何修复它？我希望它直接出现在我的下拉按钮下面。我已经尝试创建一个类并在CSS中将其设置为＆＃34; position：absolute;＆＃34;但它不起作用。这是我的角度代码：

<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

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

1 个答案: