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

我的下拉菜单内容覆盖了我的下拉按钮，你知道如何修复它吗？我希望它直接出现在我的下拉按钮下面。我尝试过创建一个类，并在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>

我已将其添加到代码笔中。下面是我的代码在运行时的样子

---

还有，有人知道如何更改下拉菜单内容的背景颜色吗？

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

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

---

检查此更新的

您是否可以发布一个代码片段或JSFIDLE链接来演示正在发生的事情？此代码似乎没有提供足够的原因证据。它看起来像链接中的某个内容。我希望菜单内容显示在图标下。编辑：我已将其添加到代码笔中。下面是我的代码在运行时的样子。您可能希望引用此定位，因为发射元素下方的菜单将其与其上下文分离。根据您的需求，您可能需要使用下拉按钮

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