Css 响应式菜单没有'；调整大小时不起作用

我正在为自己制作一个反应迅速的网站，我有点被菜单卡住了

当我调整到670px屏幕时，我的菜单会改变，但底部的两个菜单项不能正常工作

这是媒体查询中的代码：

CSS

HTML

传记
插图
胶卷
Tumblr
接触

---

您可以在页脚上查看live网站，页脚的高度为50%，覆盖底部的两个导航按钮

---

玩转导航的z-指数，这会让你找到你需要去的地方

当你说它不工作时，你是在说Tumblr和Contact是如何相互关联的？据我所知，它是如何工作的。请详细说明您的问题。更改窗口大小时，底部的两个菜单项不可选择。喜欢他们没有链接，如果你玩的窗口大小，你可以看到它，谢谢！添加了z索引和相对位置，效果很好！！！谢谢

@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;
    }   
}   

<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>