CSS transition doesn't work in Firefox - html

Question

I tried a lot and already searched in Google but I don't find a solution for my problem:
I made a jsfiddle for you to see my source-code: Click here for my Source Code
Everything works fine. But the transition doesn't work in Firefox.
Here is my Sourcecode because I have to post it too if I want to use a jsfiddle!
<nav>
<ul>
<li>Startseite</li>
<li>Projekte
<ul>
<li>Java / Bukkit</li>
<li>Webdesign</li>
<li>PHP | MySQL</li>
</ul>
</li>
<li>Kontakt</li>
<li>Über mich</li>
</ul>
<div class="clear"></div>
</nav>
// CSS down \\ HTML up
nav{
background: #333;
color: #fff;
padding: 5px;
}
nav ul{
padding: 0px;
margin: 0px;
list-style: none;
}
nav ul li{
float:left;
}
nav ul li a{
color: #fff;
background: #585858;
padding: 10px;
margin-right: 5px;
display: block;
text-decoration: none;
border: 1px solid white;
}
nav ul li a.active{
background: #373737;
}
nav ul li a:hover{
color: #333;
background: #fff;
border: 1px solid black;
}
nav ul li ul{
position: absolute;
height: 0px;
overflow: hidden;
}
nav ul li ul li{
float: none;
}
nav ul li:hover ul{
overflow: visible;
}
nav ul li:hover ul li a{
padding: 10px;
}
nav ul li ul li a{
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
padding: 0px 10px;
}

Answer 1

It looks like removing the overflow:hidden from the container suddenly makes the transition work. This leads me to believe it's an "optimisation" in Firefox that doesn't compute the "hidden" element.
Personally, I've used this to produce a similar effect: Rather than hiding the element, give it transform:scaleY(0); normally, and transform:scaleY(1); on hover.