title: Material UI+React hovering on tabs will not open and close properly
body: <p>currently I am working on a project with React and Material UI. I want to hover on tabs that will open an menu, but this doesn't really work. I am hoping that you guys can help me (and maybe tell me if I'm approaching this correctly)</p>
  
  <p>Where my tabs are basing of: <a href="https://imgur.com/a/HeiL2xo" rel="nofollow noreferrer">https://imgur.com/a/HeiL2xo</a></p>
  
  <p>My current project: <a href="https://imgur.com/a/Ik5NEkF" rel="nofollow noreferrer">https://imgur.com/a/Ik5NEkF</a></p>
  
  <p><strong>AppBarTop class</strong></p>
  
  <pre><code>class AppBarTop extends Component {
  
      state = {
          value: 0,
          open: false,
          anchorEl: null
      };
  
      handleMenuClick = (index) =&gt; {
  
      }
  
      handleMenuOpen = (index, event) =&gt; {
          const {currentTarget} = event;
          this.setState({
              open: !this.state.open,
              anchorEl: currentTarget,
              value: index
          })
      };
  
      handleMenuClose = () =&gt; {
          this.setState({
              open: false,
              anchorEl: null,
          })
      }
  
      handleInputSearch = () =&gt; {
  
      };
  
  
      render() {
          const {classes} = this.props;
          const {anchorEl, open} = this.state;
  
  
          return (
              &lt;div className={classes.root}&gt;
                  &lt;AppBar position="static"&gt;
                      &lt;Toolbar&gt;
                          &lt;img src={buddies} alt={"buddies"} height={50} width={50}/&gt;
  
                          &lt;div className={classes.grow}/&gt;
                          &lt;div className={classes.search}&gt;
                              &lt;div className={classes.searchIcon}&gt;
                                  &lt;SearchIcon/&gt;
                              &lt;/div&gt;
                              &lt;InputBase
                                  placeholder="Search…"
                                  onChange={this.handleInputSearch}
                                  classes={{
                                      root: classes.inputRoot,
                                      input: classes.inputInput
                                  }}
                              /&gt;
                          &lt;/div&gt;
                          &lt;div className={classes.grow}/&gt;
  
                          &lt;List&gt;
                              {TopMenu.map((item, index) =&gt; (
  
                                  &lt;Tab key={index} component={Link} to={{pathname: item.pathname}}
                                       classes={{root: classes.tabItem}} label={item.label}/&gt;
                              ))}
                          &lt;/List&gt;
  
                      &lt;/Toolbar&gt;
                      &lt;Paper className={classes.grow}&gt;
                          &lt;Tabs
                              value={this.state.value}
                              indicatorColor="primary"
                              textColor="primary"
                              centered&gt;
                              {BottomMenu.map((item, index) =&gt; (
                                  &lt;Tab
                                      key={index}
                                      onMouseOver={this.handleMenuOpen.bind(this, index)}
                                      data-key={index}
                                      classes={{root: classes.tabItem}}
                                      label={item.label}
                                      aria-owns={open ? 'menu-list-grow' : undefined}
                                      aria-haspopup={"true"}/&gt;
                              ))}
                          &lt;/Tabs&gt;
                          &lt;Popper open={open} anchorEl={anchorEl}  id="menu-list-grow"&gt;
                              &lt;Paper&gt;
  
                                      &lt;MenuList&gt;
                                          {BottomMenu[this.state.value].items.map((item, index) =&gt; (
                                              &lt;MenuItem key={index} onClick={this.handleMenuClose}&gt;{item}&lt;/MenuItem&gt;
                                          ))}
                                      &lt;/MenuList&gt;
  
                              &lt;/Paper&gt;
                          &lt;/Popper&gt;
                      &lt;/Paper&gt;
  
                  &lt;/AppBar&gt;
              &lt;/div&gt;
  
          );
      }
  }
  
  export default withStyles(styles)(AppBarTop)
  </code></pre>