0

我正在尝试将 Foundation 更改为在 1024 上工作，但它不起作用..

    <nav class="top-bar">

    <ul>
    <li class="name"><a href="#homepage"><img src="images/logo-new.png" alt="Logo"></a></li>
    </ul>

    <section class="hide-for-medium-up topnav">
    <ul class="right">
    <li><a href="#homepage">Home</a></li>
    <li><a href="#our-team">Our Team</a></li>
    <li><a href="#about-us">About Us</a></li>
    <li><a href="#services">Projects</a></li>
    <li><a href="#news">News</a></li>
    <!-- <li><a href="#portfolio">Portfolio</a></li> -->

    <li><a href="#contact">Contact</a></li>
    </ul>
    </section>

    <select class="responsive-nav show-for-small" onChange="moveTo(this.value)" onFocus="moveTo(this.value)">
    <option value="" selected="">Main Navigation</option>
    <option value="#homepage">Home</option>
    <option value="#about-us">About Us</option>
    <option value="#our-team">Our Team</option>
    <option value="#news">News</option>
    <!-- <li><a href="#portfolio">Portfolio</a></li> -->
    <option value="#services">Projects</option>
    <option value="#contact">Contact</option>
    <option value="#" >Facebook</option>
    <option value="#">Twitter</option>
    </select>
    </nav>

和 CSS

    .top-bar ul > li a:not(.button) {
        color: #FFFFFF;
        display: block;
        font-family: 'Raleway', sans-serif;
        font-size: 14px;
        font-weight: 400;
        height: 85px;
        line-height: 85px;
        padding: 0 15px;
        text-decoration: none;
        text-transform: none;
        transition: all 0.3s ease-in-out 0s;
    }

    .top-bar ul > li:not(.name):hover, .top-bar ul > li:not(.name).active, .top-bar ul > li:not(.name):focus {
        background: #012f48;
        transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out; /* Firefox 4 */
        -webkit-transition: all 0.3s ease-in-out; /* Safari and Chrome */
        -o-transition: all 0.3s ease-in-out; /* Opera */
    }
    .top-bar ul > li:not(.name):hover a, .top-bar ul > li:not(.name).active a, .top-bar ul > li:not(.name):focus a {
        color: #fff;
        transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out; /* Firefox 4 */
        -webkit-transition: all 0.3s ease-in-out; /* Safari and Chrome */
        -o-transition: all 0.3s ease-in-out; /* Opera */
    }

我的网站在大屏幕上运行良好，但我希望它在 1024 上显示 NAV。尝试使用http://foundation.zurb.com/docs/components/visibility.html但没有任何效果。

4

0 回答 0