Question

我正在为自己创建一个响应式网站，我对菜单感到有些困惑。

当我调整到670px屏幕时，我的菜单会发生变化，但我的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，这应该可以让你到达目的地

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

1 个答案: