title: CSS dropdown menu transition
body: <p>I am trying to add dropdown transition for the menu I am working on, but it seems that I have no idea what I am doing wrong. The menu itself appears instantly, ignorning the transition effect.</p>
  
  <p>CSS code I use for transition: 
  </p>
  
  <pre><code>-webkit-transition: height 0.3s ease-in;
  -moz-transition: height 0.3s ease-in;
  -o-transition: height 0.3s ease-in;
  -ms-transition: height 0.3s ease-in;
  transition: height 0.3s ease-in;
  opacity:0;
  </code></pre>
  
  <p>As far as I know I should add it to the <code>nav ul ul</code> CSS block, and adding <code>opacity:1</code> to <code>nav ul li:hover &gt; ul</code> but it does not work.</p>
  
  <p>And here's whole code of the menu. </p>
  
  <p>HTML
  </p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="http://www.www.com/"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.www.com/"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;Dropdown Here&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="http://www.www.com/"&gt;Dropdown1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.www.com/"&gt;Dropdown2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.www.com/"&gt;Dropdown3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.www.com/"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.www.com/"&gt;Menu 5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And the CSS I am using
  </p>
  
  <pre><code>nav ul {
      background: #efefef; 
      background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
      background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
      background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
      box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
      padding: 0 25px;
      border-radius: 10px;  
      list-style: none;
      position: relative;
      display: inline-table;
      float:right;
      z-index:9999;
  
  }
  
  nav ul ul {
      display: none;
      -webkit-transition: height 0.3s ease-in;
      -moz-transition: height 0.3s ease-in;
      -o-transition: height 0.3s ease-in;
      -ms-transition: height 0.3s ease-in;
      transition: height 0.3s ease-in;
      opacity:0;      
  }
  
  nav ul li:hover &gt; ul {
      display: block;
      opacity:1;
  }
  
  nav ul:after {
      content: ""; 
      clear: both; 
      display: block;
  }
  
  nav ul li {
      float: left;
  }
  
  nav ul li:hover {
      background: #4b545f;
      background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
      background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
      background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
  }
  
  nav ul li:hover a {
      color: #fff;
  }
  
  nav ul li a {
      display: block;
      padding: 30px 20px;
      color: #757575; 
      text-decoration: none;
  }
  
  nav ul ul {
      background: #5f6975; 
      border-radius: 0px; 
      padding: 0;
      position: absolute; 
      top: 100%;
  }
  
  nav ul ul li {
      float: none; 
      border-top: 1px solid #6b727c;
      border-bottom: 1px solid #575f6a; 
      position: relative;
  }
  
  nav ul ul li a {
      padding: 15px 40px;
      color: #fff;
  }   
  
  nav ul ul li a:hover {
      background: #4b545f;
  }
  
  nav ul ul ul {
      position: absolute; left: 100%; top:0;
  }
  </code></pre>