react如何实现浮动菜单

classUserMenuextendsReact.Component{

constructor(props){
super(props),
this.state={
modalIsOpen:'none',
atUserItems:false,
}

this.contentBtn=this.contentBtn.bind(this),
this.programBtn=this.programBtn.bind(this),
this.handleMouseOver=this.handleMouseOver.bind(this);
this.handleMouseOut=this.handleMouseOut.bind(this);
this.userCenter=this.userCenter.bind(this);
this.handleMouseUserOver=this.handleMouseUserOver.bind(this);

}

contentBtn(){
this.context.router.history.push("/details");
}

programBtn(){
this.context.router.history.push("/gui");
}

handleMouseOver(e){
this.setState({
modalIsOpen:'block',
})
}

handleMouseOut(){

this.setState({
modalIsOpen:'none',
})

}
handleMouseUserOver(e){
this.setState({
modalIsOpen:'block',
})
}

userCenter(){
this.setState({
modalIsOpen:'none',
})
}免费云主机、域名

render(){
const{username}=this.props;
return(

{username}



个人中心
账号设置
注销



)
}

}

UserMenu.contextTypes={
router:PropTypes.object.isRequired
};

exportdefaultUserMenu

.body{
position:relative
}
.menus{
display:none;
position:absolute;
right:0;
z-index:999;
}

.uname{
color:white;
margin-left:5px;
margin-right:10px;
cursor:pointer;
padding-top:25px;
padding-bottom:20px;
padding-left:5px;
}
.uname:hover{
color:darkorange;
}
.ul{
width:120px;
background-color:#fff;
padding:10px;
border-radius:8px;
-webkit-box-shadow:05px10px0rgba(12,40,46,0.20);
box-shadow:05px10px0rgba(12,40,46,0.20);
}
.li{
list-style:none;
height:40px;
display:list-item;
cursor:pointer;
}
.li:hover{
color:darkorange;
}