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);。