本篇内容介绍了“react如何实现浮动菜单”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

专注于为中小企业提供成都做网站、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业秦淮免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了超过千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

react实现浮动菜单的方法：1、利用onMouseOver和onMouseLeave来监听鼠标的变化；2、在样式中设置父类及子类的position值；3、设置父类值为relative，子类值为absolute，并在菜单的css中加入“z-index:999;”；4、通过控制display来控制显示与否即可。

React中hover悬浮菜单的做法

对于悬浮菜单，主要是借助html标签的事件机制，或者hover来实现，先看下效果图：

当鼠标放在名字上时，弹出菜单，离开时，菜单消失。

1.先说下利用事件机制做法：

在事件机制中，主要利用鼠标的一些事件来监听，具体如下：

可以利用onMouseOver（鼠标进入），onMouseLeave （鼠标离开）来监听鼠标的变化

class UserMenu extends React.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}