Css 带动画的向上滑动菜单

我做了这个：

<div class="example">
    <div class="menuholder">
        <ul class="menu slide">
            <li>
                <a href="#" class="Burgergemeinde">
                    Burger-gemeinde
                    <div class="rojo"></div>
                </a>
            </li>
            <li>
                <a href="#" class="Seniorenwohnungen">
                    Senioren-wohnungen
                    <div class="naranja"></div>
                </a>
            </li>
            <li>
                <a href="#" class="Burgerheim">
                    Burgerheim
                    <div class="amarillo"></div>
                </a>
            </li>
            <li>
                <a href="#" class="Schüür">
                    Schüür
                    <div class="violeta"></div>
                </a>
            </li>
            <li>
                <a href="#" class="Forst">
                    Forst
                    <div class="verde"></div>
                </a>
            </li>
        </ul>
    </div>
</div>

css代码在这里

我的问题是：为什么Safari可以工作，而Firefox不能？有人能帮忙吗？ 也许我没有正确地编写代码。

---

这太难了。

这里有一个JS fiddle演示，它在firefox中工作

仔细检查可能会帮助你完成过渡

这是css

#main
{
height:200px;
width:200px;
background-color:red;
-webkit-transition: height 0.9s ease-in-out;
-moz-transition: height 0.9s ease-in-out;
-ms-transition: height 0.9s ease-in-out;
-o-transition: height 0.9s ease-in-out;
transition: height 0.9s ease-in-out;
}

#main:hover
{
height:300px;    
}

这是css，它为一个div设置了动画

<div id="main"></div>

---

检查一下，如果你不能取得成功，请告诉我。我将开始在小提琴中编辑您的答案：）

需要垂直动画。你的是一个向下的动画。