无法添加到下拉菜单CSS HTML的过渡

Question

我无法在下拉菜单中添加过渡效果。老实说，我不知道原因，因为我使用的方法与网上看到的方法不同，但是我想了解为什么它不起作用的原因。

显示下拉菜单，但没有效果。

.hoverdrop {
  background-color: transparent;
  color: gray;
  font-size: 22px;
  border: none;
  cursor: pointer;
  position: absolute;
  margin: 0px;
  padding: 0%;
  height: 100%;
  width: 100%;
  transition: 2s;
}

.activelang {
  display: grid;
  transform: translate(0px, 0px);
  background: transparent;
  height: 100%;
  width: 83px;
  border-radius: 0px;
  transition: all 500ms;
  overflow: hidden;
  margin: 0px;
  overflow: visible;
}

.activelang :hover {
  background-color: wheat;
  transition: 2s;
}

.languages :hover .langcontent {
  display: block;
}

.languages {
  height: 100%;
  position: absolute;
  right: 200px;
  top: 0px;
  transition: 3s;
}

.langcontent {
  display: none;
  position: absolute;
  top: 80px;
  background-color: white;
  min-width: 83px;
  text-align: center;
  overflow: hidden;
  height: auto;
}

.langcontent a {
  font-size: 22px;
  color: gray;
  font-family: sans-serif;
}

<div class="container">
  <div class="rightside">
    <div class="languages">
      <figure class="activelang">
        <button class="hoverdrop">ENG</button>
        <div id="downmenu" class="langcontent">
          <a href="esp.html">ESP</a>
        </div>
      </figure>
    </div>
  </div>
</div>