AngularJs dropdown menu-content covering menu button

Question

My dropdown menu content is covering up my dropdown button, any idea how to fix it? I want it to appear directly underneath my dropdown button. I have tried creating a class and style it in CSS as "position: absolute;" but it doesn't work. Here is my code in 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>

here is my Angular app

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


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

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

I have added it to codepen. Here is how my code looks like in action. http://codepen.io/zcook/pen/YqramL

Also, does anyone know how to change the color of the background of the dropdown menu content?

Answer 1

why can't you change the CSS property of class .md-open-menu-container.md-active?

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

Check this updated codepen