我的Web Designer无法正确显示导航栏 . 将鼠标悬停在具有 dropdown-items 类的项目上时，应显示下拉列表中列出的项目的下拉列表 . 相反，只显示一个没有项目的块 . 导航栏是React.JS组件，它在父容器中呈现 . 我在下面列出了他的html和css .

编辑：当前结果的屏幕截图 . 它出现在悬停但不在列表中

编辑2：它适用于带有CSS的纯HTML，但不适用于带有CSS的React

enter image description here

html {
  font-family: sans-serif;
}


/*div{
    background:white;
}*/


/********* NavBar Section **********/

.navbar {
  overflow: hidden;
  background-color: #B597C3;
}


/* links inside the navigation bar */

.navbar li {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: .625em 5em;
  text-decoration: none;
  font-size: 17px;
}


/* color of links on hover */

.navbar a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.navbar a.active {
  text-decoration: underline;
}


/* Drop Down Items */

.dropdown-btn {
  float: left;
  font-size: 1.0625em;
  color: white;
  border: none;
  cursor: pointer;
  overflow: hidden;
}

.dropdown {
  display: inline-block;
}

.dropdown-items {
  position: absolute;
  display: none;
  margin: 0;
  min-width: 10em;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-items a {
  color: white;
  padding: 12px 50px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-items {
  display: block;
}

<div class="navbar">
  <ul>
    <li class="dropdown">
      <a href="#" class="dropdown-btn">Clothes</a>
      <div class="dropdown-items">
        <a href="#">Item</a>
        <a href="#">Item</a>
        <a href="#">Item</a>
        <a href="#">Item</a>
      </div>
    </li>
    <li>About</li>
    <li>Policies</li>
    <li>How To Rent</li>
    <li>Contact</li>
  </ul>
</div>
javascript html css reactjs