md-menu-bar上的angular-material app-ng-mouseover

Question

我的md-menu-bar指令存在问题。我有一个带按钮（汉堡包）和标题的酒吧。我想仅在mouseover上显示此栏。但是当正常观看时，它应该是不可见的。

所以只有当光标位于正确的位置（页面顶部）时...另外它应该是一个平滑过渡，使其向下滑动，我该怎么办？我已经尝试过ng-show，ng-hide和ng-style或ng-class来改变这一点，但它并不起作用。请帮忙。

<md-menu-bar layout="row" id="toolbar" class="md-toolbar-tools">
    <md-menu>
        <button class="md-icon-button" aria-label="Settings" ng-click="$mdOpenMenu()">
            <md-icon md-svg-icon="icons/menu.svg"></md-icon>
        </button>
        <md-menu-content>
            <md-menu-item>
                <md-button ng-click="ctrl.windowAction('settings', $event)">Settings</md-button>
            </md-menu-item>
            <md-menu-divider></md-menu-divider>
            <md-menu-item>
                <md-button ng-click="ctrl.windowAction('calendar', $event)">Calendar</md-button>
            </md-menu-item>
        </md-menu-content>
    </md-menu>
    <h2 id="title">Home Page</h2>
</md-menu-bar>

这就是菜鸟目前的样子：