调整大小时响应菜单不起作用

Question

我正在为自己开发一个响应式网站，但我有点卡在菜单上。

当我将屏幕调整为 670 像素时，我的菜单发生了变化，但我的 2 个底部菜单项无法正常工作。

这是来自媒体查询的代码：

CSS

@media screen and (min-width:670px) {       
    nav select{
        display:none;
}

    nav ul:first-of-type{
        display: block;
        list-style: none;
        font-size: 1.4em;
    }

    nav ul li{
        border-top: black 1px solid;
        line-height: 2.5em;
    }

    nav ul li:last-of-type{
        border-bottom: black 1px solid;
    }

    nav ul li a{
        display: block;
    }

    nav ul li a:hover{
        opacity: .2;    
    }

    #video1{
        display: none;
    }

    #video2{
        display: block;
    }

    #bio{
        padding-top: 2em;   
    }

    p{
        font-size: 1em;
    }

    a{
        color: #000;
    }   
}   

HTML

<div id="menu">
    <nav>
        <ul>
            <li><a href="#1">biography</a></li>
            <li><a href="#2">illustration</a></li>
            <li><a href="#3">film</a></li>
            <li><a href="#4">tumblr</a></li>
            <li><a href="#5">contact</a></li>
        </ul>
    </nav>
</div>

<nav>
    <select>
        <option value="#1" selected>Biography</option>
        <option value="#2">Illustration</option>
        <option value="#3">Film</option>
        <option value="#4">Tumblr</option>
        <option value="#5">Contact</option>
    </select> 
</nav>

您可以在http://nickzijlstra.com/resp查看实时网站

Answer 1

页脚的高度为 50%，覆盖底部的几个导航按钮。

玩转导航的 z-index，这应该可以让你到达你需要去的地方