title: When Hovered on a menu drop down a submenu
body: <p>I'm trying to make it to where when I hover over the menu it transitions into dropping the submenu, but it is not working. I set the dropdown menu's height to 0px and when I hover I want it to be 650px so it looks like it's transitioning downwards. I need help, please.</p>
  
  <pre><code>&lt;div class="dropdownform"&gt;
          &lt;div class="firstdropdown"&gt;
              &lt;div class="firstblock"&gt;Background&lt;/div&gt;
              &lt;div class="firstblock"&gt;Goals&lt;/div&gt;
              &lt;div class="firstblock"&gt;Achievments&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="seconddropdown"&gt;
              &lt;div class="secondblock"&gt;Future&lt;/div&gt;
              &lt;div class="secondblock"&gt;College&lt;/div&gt;
              &lt;div class="secondblock"&gt;Hot 50 Flyer&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="thirddropdown"&gt;
              &lt;div class="thirdblock"&gt;Letter To Freshmen&lt;/div&gt;
              &lt;div class="thirdblock"&gt;Letter of Recommendation&lt;/div&gt;
              &lt;div class="thirdblock"&gt;Scholarship Essay&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  .dropdownform {
      display: flex;
      flex-direction: row;
      position: relative;
      left: 5px;
      justify-content: space-between;
      margin-right: 712px;
      bottom: 35px;
  }
  .firstdropdown {
      position: relative;
      width: 250px;
      height: 0px;
      background-color: black;
      right: 2.5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      justify-content: space-around;
      border-bottom-right-radius: 35px;
      border-bottom-left-radius: 35px;
      border-top-right-radius: 12px;
      border-top-left-radius: 12px;
      overflow: hidden;
  }
  .seconddropdown {
      position: relative;
      width: 250px;
      height: 0px;
      background-color: black;
      right: .3px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      justify-content: space-around;
      border-bottom-right-radius: 35px;
      border-bottom-left-radius: 35px;
      border-top-right-radius: 12px;
      border-top-left-radius: 12px;
      overflow: hidden;
  }
  .thirddropdown {
      position: relative;
      width: 250px;
      height: 0px;
      background-color: black;
      left: 1.8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      justify-content: space-around;
      border-bottom-right-radius: 35px;
      border-bottom-left-radius: 35px;
      border-top-right-radius: 12px;
      border-top-left-radius: 12px;
      overflow: hidden;
  }
  .firstblock {
      position: relative;
      width: 200px;
      height: 50px;
      background-color: white;
      border-radius: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .secondblock {
      position: relative;
      width: 200px;
      height: 50px;
      background-color: white;
      border-radius: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .thirdblock {
      position: relative;
      width: 200px;
      height: 50px;
      background-color: white;
      border-radius: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .first:hover + .firstdropdown {
      height: 650px;
      transition: .5s ease-in-out;
  }
  </code></pre>
  
  <p>Here's a reference image: <a href="https://i.stack.imgur.com/gGYeE.png" rel="nofollow noreferrer">image</a></p>
  
  <p>I know this might be a duplicate but I didn't find anything that fit my situation.</p>