0

私はレスポンシブ Web サイトに取り組んでいますが、メニューに少しこだわっています。

画面のサイズを 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でライブ Web サイトを確認できます。

4

1 に答える 1

1

フッターの高さは 50% で、下の 2 つのナビゲーション ボタンに重なっています。

nav の z-index をいじってみると、目的の場所に移動できるはずです

于 2013-01-28T04:20:50.427 に答える