CSS過渡不會在Firefox

Question

我想了很多，已經在谷歌搜索工作，但我沒有找到我的問題的解決方案：

我做了的jsfiddle給你看我的源代碼：Click here for my Source Code

一切工作正常。但是這種轉換在Firefox中不起作用。

這是我的源代碼，因爲如果我想使用jsfiddle，我也必須發佈它！

<nav> 
     <ul> 
      <li><a href="#" class="active">Startseite</a></li> 
      <li><a href="#">Projekte</a> 
       <ul> 
        <li><a href="#">Java/Bukkit</a></li> 
        <li><a href="#">Webdesign</a></li> 
        <li><a href="#">PHP | MySQL</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Kontakt</a></li> 
      <li><a href="#">Über mich</a></li> 
     </ul> 
     <div class="clear"></div> 
    </nav> 

// CSS下來\\ HTML高達

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

它看起來像從容器中取出overflow:hidden突然使過渡工作。這讓我相信這是Firefox中的一個「優化」，它不計算「隱藏」元素。

就我個人而言，我用它來產生類似的效果：不是隱藏元素，而是在正常情況下給它transform:scaleY(0);，在懸停時給予transform:scaleY(1);。