CSS3转换在移动设备上错误触发

我有一个非常简单的菜单，我正在工作，它在桌面上工作得非常好，但是，当我在移动设备上测试它时，从主屏幕到2似乎一直到2.1（见下面的导航）

ASDASDASD 1
ASDASDASD 2
ASDASD 2.1
ASDASD 2.1.1
ASDASD 2.1.2
ASDASD 2.1.3
ASDASD 2.1.4
ASDASD 2.1.5
ASDASD 2.2
ASDASD 2.3
ASDASD 2.4
ASDASD 2.5
ASDASDASD 3
ASDASDASD 4
ASDASDASD 5
​

---

我不知道是我不完全理解CSS转换，还是什么。对于所有有趣的细节，这里有一把小提琴：

解决了它。最后，我为div设置了一个过渡位置，而不是左侧。

看起来z索引直到动画结束后才生效。有没有一种方法可以让它在只使用CSS的动画之前启动？

<nav id="megamenu">
    <h2>asdasdasdasd 1</h2>
    <h2>asdasdasdasd 2</h2>
    <div>
        <h2>asdasdasdasd 2.1</h2>
        <div>
            <h2>asdasdasdasd 2.1.1</h2>
            <h2>asdasdasdasd 2.1.2</h2>
            <h2>asdasdasdasd 2.1.3</h2>
            <h2>asdasdasdasd 2.1.4</h2>
            <h2>asdasdasdasd 2.1.5</h2>
        </div>

        <h2>asdasdasdasd 2.2</h2>
        <h2>asdasdasdasd 2.3</h2>
        <h2>asdasdasdasd 2.4</h2>
        <h2>asdasdasdasd 2.5</h2>
    </div>

    <h2>asdasdasdasd 3</h2>
    <h2>asdasdasdasd 4</h2>    
    <h2>asdasdasdasd 5</h2>
</nav>​