悬停功能无法在React js应用中实现

Question

我是新来的反应者，正在尝试创建一个电子商务网站。

如您所见，我已经绘制了导航，但是出现了一个问题-每当我尝试单击子菜单（如Girls，Boys等）时，应该会出现另一个下拉菜单，但没有发生。

下面是我的代码。

topNavigation.js

import React, { Component } from 'react';
import axios from 'axios';
import SubMenu from './subMenu';



class Navigation extends Component {

  state = {
    mainCategory: []
  }

  componentDidMount() {
    axios.get('http://localhost:3030/topCategory')
      .then(res => {
        console.log(res.data.express);
        this.setState({
          mainCategory: res.data.express.catalogGroupView
        })
      })
  }



  render() {

    const { mainCategory } = this.state;
    return mainCategory.map(navList => {
      return (

        <ul className="header">
          <li key={navList.uniqueID}>
            <a className="dropbtn ">

              {navList.name}

              <ul className="dropdown-content">
                <SubMenu below={navList.catalogGroupView} />
              </ul>

            </a>
          </li>
        </ul>

      )

    })

  }


}

export default Navigation;

subMenu.js

import React, { Component } from 'react';
import SubListMenu from './subListMenu';


class SubMenu extends Component {
    render() {
        const { below } = this.props;
        return below.map(sub => {

            return (

                <React.Fragment>

                    <li key={sub.uniqueID}> <a>

                    {sub.name}

                        {
                            <ul className="sub-menu">
                            {sub.catalogGroupView !== undefined &&


                                <SubListMenu subBelow={sub.catalogGroupView} />
                            }
                            </ul>


                        }
                        </a>
                    </li>

                </React.Fragment>

            )
        })

    }

}

export default SubMenu;

subListMenu.js

import React, { Component } from 'react';


class SubListMenu extends Component {

    render() {
        const { subBelow } = this.props;
        console.log(subBelow)
        return subBelow.map(subl => {

            return (


                <li key={subl.uniqueID}><a>{subl.name}</a></li>




            )
        })

    }

}

export default SubListMenu;

index.css

.header{
  display:inline-block;
  vertical-align: top;
  list-style-type: none;

}

.header .dropbtn {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.header:hover .dropbtn {
  background-color: #00b5cc;
}


.dropdown-content {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: none;
  list-style-type: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content li a:hover {
  background-color: #ddd;
}

.header:hover .dropdown-content {
  display: block;
}

.drop-button {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.sub-menu{
  list-style-type: none;
  display:none;
}

.dropdown-content li a:hover .submenu{
  display:block;
}

img{ 
    width:100%;
  }