Cant add a transition to dropdown menu css html

Question

I am unable to add a transition effect to my dropdown menu. I honestly cant figure out the reason since I used a different method than what I saw online but I want to understand the reasons as to why it doesn't work.

The dropdown menu shows but without the effect.

.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>