title: CSS3 animation transition: opacity not working
body: <p>i'm having some trouble with animating a dropdown menu using css3. I need it to work with css3 and not jQuery or javascript. I've added all the rules neccessary but still the effect doesn't happen. Can anyone please help? Here is a fiddle of my code. Thank you.</p>
  
  <p><a href="http://jsfiddle.net/Zmr7u/6/" rel="noreferrer">http://jsfiddle.net/Zmr7u/6/</a></p>
  
  <pre><code>   html code:                 
                      &lt;header class="main-header"&gt;
      &lt;nav class="main-nav"&gt;
          &lt;ul class="top-nav"&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;home&lt;/a&gt;
                  &lt;ul class="drop-down"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;about&lt;/a&gt;
                  &lt;ul class="drop-down"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;products&lt;/a&gt;
                  &lt;ul class="drop-down"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;contacts&lt;/a&gt;
                  &lt;ul class="drop-down"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  
  
           css code:
  
                                  nav.main-nav {
  background: #333;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
  background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f); 
  background-image:    -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image:     -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image:      -o-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image:      linear-gradient(top, #2f2f2f, #4f4f4f);
  width: 100%;
   }
  
   .top-nav {
  border-bottom: 2px solid #111;
  height: 30px;
  list-style-type: none;
  margin: 0;
  padding-left: 0;
  width: 100%;
   }
  
   .top-nav li {
  background: #333;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
  background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f); 
  background-image:    -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image:     -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image:      -o-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image:      linear-gradient(top, #2f2f2f, #4f4f4f);
  border-bottom: 2px solid #111;
  border-right: 1px solid #555;
  float: left;
  font-size: 14px;
  height: 20px;
  padding-top: 10px;
  position: relative;
  text-align: center;
  width: 150px;
   }
  
   .top-nav li ul.drop-down {
  position: absolute;
  top: 32px;
  left: 0;
  visibility: hidden;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
    }
  
   .top-nav li:hover ul.drop-down {
  visibility: visible;
  opacity: 1;
  display: block;
   }
  
   .top-nav li .drop-down li {
  height: 20px;
  -webkit-transition: height 0.3s ease;
  -moz-transition: height 0.3s ease;
  -o-transition: height 0.3s ease;
  transition: height 0.3s ease;
    }
  
  .top-nav li .drop-down li:hover {
  height: 30px;
   }
  
   .top-nav li a {
  color: #aaa;
  padding-top: 5px;
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 25px;
  text-decoration: none;
   }
  </code></pre>