title: where to put transition - dropdown menu animation
body: <pre><code>&lt;div class=&quot;dropdown&quot;&gt;
  &lt;button class=&quot;dropbtn&quot;&gt;ALAT&lt;/button&gt;
  &lt;div class=&quot;dropdown-content&quot;&gt;
      &lt;a href=&quot;index2.php&quot;&gt;&lt;img src=&quot;home.jpg&quot; class=&quot;home&quot; width=&quot;70px&quot; height=&quot;50px&quot; title=&quot;Dashboard&quot;&gt;&lt;/a&gt;
      &lt;a href=&quot;papar_topik.php&quot;&gt;&lt;img src=&quot;quiz.jpg&quot; class=&quot;quiz&quot; width=&quot;70px&quot; height=&quot;50px&quot; title=&quot;Kuiz&quot;&gt;&lt;/a&gt; 
      &lt;a href=&quot;prestasi_topik.php&quot;&gt;&lt;img src=&quot;prestasi.png&quot; width=&quot;70px&quot; height=&quot;50px&quot; title=&quot;Prestasi Pelajar&quot;&gt;&lt;/a&gt; 
      &lt;a href=&quot;senarai_pelajar.php&quot;&gt;&lt;img src=&quot;senarai.jpg&quot; class=&quot;senarai&quot; width=&quot;70px&quot; height=&quot;50px&quot; title=&quot;Senarai Pelajar&quot;&gt;&lt;/a&gt; 
      &lt;a href=&quot;import_daftar.php&quot;&gt;&lt;img src=&quot;import.jpg&quot; class=&quot;import&quot; width=&quot;70px&quot; height=&quot;50px&quot; title=&quot;Import Daftar&quot;&gt;&lt;/a&gt; 
      &lt;a href=&quot;#&quot; onclick=&quot;logout()&quot;&gt;&lt;img src=&quot;logout.png&quot; width=&quot;70px&quot; height=&quot;50px&quot; title=&quot;Keluar&quot;&gt;&lt;/a&gt;
  </code></pre>
  <p>The above is my code to make a dropdown button. I want to make the dropdown content to be appearead in transition when the mouse moves near the button. Below is my CSS code:</p>
  <pre><code>div{
          font-size: 20px;
          text-align: center;
          top: 170px;
          left: 1000px;
      }
      .dropbtn {
          background-color: aqua;
          color: black;
          padding: 16px;
          font-size: 20px;
          font-family: brush script mt;
          font-style: bold;
          border-radius: 50%;
      }
  
      .dropdown {
          position: fixed;
          display: inline-block;
      }
  
      .dropdown-content {
          display: none;
          position: fixed;
          background-color: cornsilk;
          width: 120px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          z-index: 1;
          height: 0px;
          transition: all .5s ease;
      
      }
  
      .dropdown-content a {
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
      }
  
      .dropdown-content a:hover {
          background-color: yellow;
      }
  
      .dropdown:hover .dropdown-content {
          display: block;
          top: 10px;
          height: 1000px;
      }
  </code></pre>
  <p>However, the dropdown content did not show any transition but just appear as usual. Anyone can direct me on where should I put the &quot;transition&quot; tag?</p>