[Menu] Does not add margin if the first item is a `Divider`

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

see https://codesandbox.io/s/iconmenu-demo-material-ui-forked-i2xk9i for a code example.

Today, by an error of a CSS selector (in my opinion), a Divider will not get correct margin-bottom (and thus be very close to the first MenuItem).

This bug has two causes based on the selector (https://github.com/mui/material-ui/blob/master/packages/mui-material/src/MenuItem/MenuItem.js#L115) used:

1. the style is appended to MenuItem not Menu
2. the style uses the + CSS selector which means it will only select dividers placed immediately after menu items. in the case of a divider being first, though, this will never match.

Expected behavior 🤔

BEFORE	AFTER

There should be a margin bottom for the first item if it is a Divider.

Steps to reproduce 🕹

Steps:

1. Create a Menu and add a Divider before any MenuItem.

Context 🔦

Consider the case of a UI that has divided menu items like this from Insomnia:

In this kind of UI, it's very common to have a divider beginning a menu item list.

Your environment 🌎

The docs. See link above.