Set mat-menu style

Define original background-color and mouseover color both in the CSS:

.mat-menu-item {
  color: blue !important;
}

button.mat-menu-item{
    background-color: white;
}

button.mat-menu-item:hover {
    background-color: blue;
    color: #fff !important;
}

Easier Way If you want to change your component only without affecting other components, you should add a class to the menu.

<mat-menu #infoMenu="matMenu" class="customize"></mat-menu>

Then style your menu with ::ng-deep.

::ng-deep .customize {
  background: red;
}

voila!! your customization will not affect other components.

Another Way: you can add backdropClass to the menu.

 <mat-menu #infoMenu="matMenu" backdropClass="customize"></mat-menu>

Then add CSS style class with +* in your styles.css

.customize+* .mat-menu-panel {
  background: red;
}

This is also accomplished without affecting others, but adding css in styles.css may be a bit inconvenient.

app.component.ts

import { Component, ViewEncapsulation ... } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  constructor() { }
}

my.component.css

.mat-menu-content {
    background-color: 'red' !important;
}

I typically use this to style the height and overflow css, but the general idea should still stand for background-color. Please note that there may be other overlaying divs with background-colors, but you should be able to access them in this way by their .mat-menu-<item name> css and change children items in the same manner.