网站菜单栏未显示在移动设备上

Question

我已经组建了一个网站 - 托管在这里：http://curleylab.psych.columbia.edu/

我使用了modernizr.js - http://curleylab.psych.columbia.edu/js/modernizr.js css样式表在这里 - http://curleylab.psych.columbia.edu/css/css1.css

对于顶部的菜单（可见并在桌面上工作），我实际上为每个页面使用了<footer>个标签。那一点HTML看起来像这样：

<footer role="contentinfo">
            <div>
                <nav id="menu">
                    <ul role="navigation" class="nav">
                        <li><a href="curleyindex.html" class="nav-home"><strong>Curley</strong>Lab </a></li>
                        <li><a href="research.html">Research</a></li>
                        <li><a href="personnel.html">Personnel</a></li>
                        <li><a href="pubs.html">Publications</a></li>
                        <li><a href="teaching.html">Teaching</a></li>
                        <li><a href="rpackages.html">R packages</a></li>
                        <li><a href="rstats.html">R instruction</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </footer>

适用于<footer>的相关css位出现在此处：

/*Footer*/
footer[role=contentinfo] {
    color: #fff;
    background: #000;
    margin: 0 -1em;
    position: fixed;
    z-index: 2;
}
footer[role=contentinfo] > div {
    max-width: 70em;
    padding: 0 1em;
    margin: 0 auto;
    overflow: hidden;
}
footer[role=contentinfo] p {
    margin: 0;

}
footer[role=contentinfo] .nav li a {
    display: block;
    border-bottom: 1px solid #808080;
    padding: 1em;
    margin: 0 -1em;

}
footer[role=contentinfo] a {
    display: inline-block;
    padding: 0.5em 0;
}
footer[role=contentinfo] a.nav-home {
    color: #fff;
}
footer[role=contentinfo] .f-rga {
    padding: 0.6em 0;
}
footer[role=contentinfo] img {
    max-width: 4.4em;
    display: inline-block;
    margin-bottom: -0.22em;
}
/*End Footer*/

/* Footer */


    footer[role=contentinfo] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;

    }
    footer[role=contentinfo] .nav {
        float: left;
    }
    footer[role=contentinfo] .nav li {
        display: inline-block;
        margin-right: 0.8em;
    }
    footer[role=contentinfo] .nav li a {
        border: 0;
        font-size: 110%;
    }
    footer[role=contentinfo] .f-rga {
        float: right;
    }

问题是它似乎在台式机上运行良好，但在移动设备上，菜单（页脚中包含的所有内容）都不会出现。非常感谢任何帮助。