html - Expanding down button on hover

Question

i have simple expanding button. It expands top, but I want it to expand downward. I am trying to do something with position, but i could not get How can i do it without js and animations.

.outer-bottomleft {
  position: absolute;
  bottom: 20%;
  left: 2%;     
  display: flex;
  color: black;     
  flex-direction: row;     
}
.outer-bottomleft .bottomleft {
  display: none;
}
.outer-bottomleft:hover .bottomleft {
  display: flex;
}
.outer-bottomleft:hover .hide-button {
  display: none;
}
.shop-button-left {
  width: 50%;     
}
.shop-button-right {
  width: 50%;
}

  <div class ="outer-bottomleft"> <span class ="hide-button btn-shop">SHOP 
  </span>
  <div class="bottomleft"> <div class = "shop-button-left">
    NEW FLAVOR:
   
  
  SHOP
 </div>
   
    <div class = "shop-button-right">
    <a href="#">
    Test
  </a>
  </div>  

</div>  
</div>

question from:https://stackoverflow.com/questions/65829524/expanding-down-button-on-hover

Answer 1

The way you've set it up, your .outer-bottomleft will always be 20% away from the bottom.

A temporary solution would be to give .hide-button.btn-shop and .bottomleft a position: absolute property

.outer-bottomleft {
  position: absolute;
  bottom: 20%;
  left: 2%;
  display: flex;
  color: black;
  flex-direction: row;
}

.outer-bottomleft .bottomleft {
  display: none;
}

.outer-bottomleft:hover .bottomleft {
  display: flex;
}

.outer-bottomleft:hover .hide-button {
  display: none;
}

.shop-button-left {
  width: 50%;
}

.shop-button-right {
  width: 50%;
}

.hide-button.btn-shop,
.bottomleft {
  position: absolute;
}

<div class="outer-bottomleft"> <span class="hide-button btn-shop">SHOP 
  </span>
  <div class="bottomleft">
    <div class="shop-button-left">
      NEW FLAVOR: SHOP
    </div>

    <div class="shop-button-right">
      <a href="#">
    Test
  </a>
    </div>

  </div>
</div>