CSS3 animation transition: opacity not working

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. http://jsfiddle.net/Zmr7u/6/ ``` html code: <header class="main-header"> <nav class="main-nav"> <ul class="top-nav"> <li> <a href="#">home</a> <ul class="drop-down"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </li> <li> <a href="#">about</a> <ul class="drop-down"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </li> <li> <a href="#">products</a> <ul class="drop-down"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </li> <li> <a href="#">contacts</a> <ul class="drop-down"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </li> </ul> </nav> </header> 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; } ```