Я хотел бы создать подменю с элементами (используя компоненты Popover и MenuItem). Не могу понять, как расположить подменю так, чтобы оно располагалось слева от родительского элемента.
Я попытался сделать родительским position: relative
, однако оболочка не позволяет отображать подменю за пределами потока Popover.
<Popover
id="simple-popper"
open={open}
anchorEl={anchorEl}
onClose={this.handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "center"
}}
transformOrigin={{
vertical: "top",
horizontal: "center"
}}
>
<MenuItem>
Link 1
<Paper
style={{
position: "absolute"
}}
>
<MenuItem>SubLink 1</MenuItem>
<MenuItem>SubLink 2</MenuItem>
<MenuItem>SubLink 3</MenuItem>
</Paper>
</MenuItem>
<MenuItem>Link 2</MenuItem>
<MenuItem>Link 3</MenuItem>
<MenuItem>Link 4</MenuItem>
</Popover>;
Я бы хотел реализовать классическое меню дизайна двухуровневого материала