Transition d'animation CSS3: l'opacité ne fonctionne pas

Question

j'ai du mal à animer un menu déroulant avec css3. J'en ai besoin pour travailler avec css3 et non avec jQuery ou javascript. J'ai ajouté toutes les règles nécessaires mais l'effet ne se produit toujours pas. quelqu'un peut-il aider s'il vous plait? Voici un violon de mon code. Je vous remercie.

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;
 }

Answer 1

Vous pouvez simplement utiliser visibility sans utiliser display:

.top-nav li ul.drop-down {
    list-style-type: none;
    position: absolute;
    top: 32px;
    left: -40px;
    visibility: hidden; 
    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; 
}

Démo.