Unable to show icon after showing menu Items in reactjs - reactjs

Question

I have created a dropdown for the icon where when the icon is clicked, it will show the dropdown. Once we hover on Card then the three dots icon will appear. But my objective is even after showing dropdown the icon should appear. but here is my code, it is disappearing. Can anyone help me with this query?
Here is the code:
<Card>
<CardHeader
className={classes.header}
avatar={<Avatar aria-label="recipe">R</Avatar>}
action={
<div>
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={this.handleClick}
>
<MoreVertIcon />
</IconButton>
<Menu
style={{ marginTop: "35px" }}
id="simple-menu"
keepMounted
anchorEl={this.state.menu}
open={Boolean(this.state.menu)}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>change password</MenuItem>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
</Menu>
</div>
}
title="Shrimp and Chorizo Paella"
subheader="September 14, 2016"
/>
</Card>
Here is the sample code

Answer 1

Create a style className which sets the icon visibility to visible. Conditionally assign the class to the parent div only when the menu is open i.e. check for this.state.menu && classes.menu.
Style
const styles = theme => ({
header: {
background: "grey",
"&:hover": {
background: "yellow",
"& $showIcon": {
visibility: "visible"
}
}
},
showIcon: {
visibility: "hidden"
},
menu: {
"& $showIcon": {
visibility: "visible"
}
}
});
JSX
<Card>
<CardHeader
className={classes.header}
avatar={<Avatar aria-label="recipe">R</Avatar>}
action={
<div className={this.state.menu && classes.menu}>
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={this.handleClick}
>
<MoreVertIcon />
</IconButton>
...
Working copy of your code is here