我想创建带有项目的子菜单(利用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>;
我想实现经典的二级材料设计菜单