在React.js中的悬停上创建下拉列表

Question

我正在尝试将css练习复制到左侧的https://www.naturolab.fr/下拉菜单中。如何在Reactjs中做到这一点？

到目前为止，我有以下代码：

@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700i');

body, html {
    background-color: #e2e2e2 !important;   
}
.main-header {
    position: fixed !important; 
    top: 0;
    left: 0;
    width: 21.4rem !important;
    height: 100%;
    z-index:4;
    background-color:  white;
    background-repeat: repeat;
    transition: left .3s ease-out;
    box-shadow: 0 0 45px rgba(0,0,0,0.5);   
}
.main-header-frame {
    height: 100%;   
    /*border: 1px solid green;*/
}
.header-wrapper {
    padding: 30px 0px 30px;
    margin-left: 28%;
    /*border: 1px solid red;*/
}
.logo {
    text-align: center;
    margin-bottom: 30px;
    margin-left: -9rem !important;
    opacity: 1;
    font-size: 24px;
    font-family: 'Merriweather', sans-serif;
}

这是我的CSS：

<USSItem name="Discover the Oceans: Blastoff! Readers">
    <description>Arctic Ocean</description>
    <icon>9781626173309-Arctic Ocean</icon>
    <price>0</price>
    <itemType>List1</itemType>
    <itemtypeid>0</itemtypeid>
  </USSItem>

我需要以某种方式获取折叠动画吗？