固定导航栏问题

Question

伙计们我正在努力修复这个导航栏。请帮忙......快点需要

<nav>

    <span class="nav-btn"></span>

    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

我提出的风格是： -

 nav{
    position: fixed;
    top: 0;
    width: 100%;
}


nav .nav {
    background: #333;
    color: #fff;
    margin: 0;
    list-style: none;
    text-align: center;
}

.nav li{
    display: inline-block;
}

.nav li a{
    color: #fff;
    padding: 25px 35px;
    font-size: 20px;
    font-weight: bold;
    background-color: #333;
    display: block;
}

.nav li a:hover{
    background-color: #fff;
    color: #333;
}

甚至在

之后

nav{
    position: fixed;
    top: 0;
    width: 100%;
}

我无法修复它。

Answer 1

你的代码已经修好了......你有什么麻烦???

＆＃13;

＆＃13;

body{height:1000px;}
nav{
    position: fixed;
    top: 0;
    width: 100%;
}


nav .nav {
    background: #333;
    color: #fff;
    margin: 0;
    list-style: none;
    text-align: center;
}

.nav li{
    display: inline-block;
}

.nav li a{
    color: #fff;
    padding: 25px 35px;
    font-size: 20px;
    font-weight: bold;
    background-color: #333;
    display: block;
}

.nav li a:hover{
    background-color: #fff;
    color: #333;
}

＆＃13;

<nav>

    <span class="nav-btn"></span>

    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;