移动网站上的z-Index

我正在尝试为自己设计个人网站的移动视图。
菜单应使用jQuery下拉。因此，以下代码可在Firefox上完美运行，但不幸的是，不适用于我的iPhone的Safari浏览器。我已经尝试了几种解决方法，并在互联网上阅读了许多帖子，但没有一个奏效。

这是我的页面正文：

<script src="js/main.js"></script>
    <aside>
        <img src="images/avatar.png" class="avatar"/>
        <nav>
            <ul>
                <li id="home" class="active"><a onclick="view_page('home'); return false;">Home</a></li>
                <li id="projects"><a onclick="view_page('projects'); return false;">Projects</a></li>
                <li id="contact"><a onclick="view_page('contact'); return false;">Contact</a></li>
            </ul>
        </nav>
        <a class="dropdown"><img src="images/arrow.png" /></a>
    </aside>
    <main>
        <div class="content">
            <h2>About me.</h2>
            <p id="justify">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        </div>
    </main>

这是移动CSS部分的相关部分：

aside nav{
    margin-top: 0.5em;
    background: white;
    text-align: center;
    display: none;
    position: relative;
    z-index: 30;
    width: 100%;
}
main{
    margin-top: 4.1em;
    width: 100%;
    margin-left: 0em;
    position: relative;
    z-index: 10;
}

当我在浏览器中打开整个页面时，应使用将菜单显示在最前面z-index。但是它显示在后台。我在做什么错（可能是使用z-index）？