AngularJsドロップダウンメニュー - メニューボタンをカバーするコンテンツ

Question

ドロップダウンメニューの内容がドロップダウンボタンを隠しています。ドロップダウンボタンのすぐ下に表示したい。私はクラスを作成してCSSで "position：absolute;"というスタイルを試してみました。それは動作しません。ここ は、角度で私のコードです：ここ

<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> 

は、私はcodepenにそれを追加している私の角度アプリ

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


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

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

です。ここで私のコードがどのように動作するかを示します。 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