导航栏列表项未显示，导航栏未粘贴在顶部

debugcn 发表于 Dev

大卫士气

我有导航栏，有2个问题。尽管它似乎很灵敏，但还是有两个问题。1.在968px到2001px之间，单击或悬停时不会显示列表项。约2000像素后，显示列表项。问题2。向下滚动时，我希望导航栏停留在页面顶部。我试图弄乱位置，但没有任何效果。这是我的代码

    * {
      margin: 0;
      padding: 0;
      }
    nav{
      background: #1b1b1b;
      display:flex;
      justify-content:space-around;
    }
    nav:after{
      content: '';
      clear: both;
      display: table;
    }
    nav .logo{
      
      color: white;
      font-size: 27px;
      font-weight: 600;
      line-height: 70px;
      padding-left: 60px;
    }
    nav ul{
      float: right;
      margin-right: 40px;
      list-style: none;
      position: relative;
    }
    nav ul li{
      
      display: inline-block;
      background: #1b1b1b;
      margin: 0 5px;
    }
    nav ul li a{
      color: white;
      line-height: 70px;
      text-decoration: none;
      font-size: 18px;
      padding: 8px 15px;
    }
    nav ul li a:hover{
      color: cyan;
      border-radius: 5px;
      box-shadow:  0 0 5px #33ffff,
                   0 0 10px #66ffff;
    }
    nav ul ul li a:hover{
      box-shadow: none;
    }
    nav ul ul{
      position: absolute;
      top: 90px;
      border-top: 3px solid cyan;
      opacity: 0;
      visibility: hidden;
      transition: top .3s;
    }
    nav ul ul ul{
      border-top: none;
    }
    nav ul li:hover > ul{
      top: 70px;
      opacity: 1;
      visibility: visible;
    }
    nav ul ul li{
      position: relative;
      margin: 0px;
      width: 150px;
      float: none;
      display: list-item;
      border-bottom: 1px solid rgba(0,0,0,0.3);
    }
    nav ul ul li a{
      line-height: 50px;
    }
    nav ul ul ul li{
      position: relative;
      top: -60px;
      left: 150px;
    }
    .show,.icon,input{
      display: none;
    }
    .fa-plus{
      font-size: 15px;
      margin-left: 40px;
    }
    @media all and (max-width: 968px) {
      nav ul{
        margin-right: 0px;
        float: left;
      }
      nav .logo{
        padding-left: 30px;
        width: 100%;
      }
      .show + a, ul{
        display: none;
      }
      nav ul li,nav ul ul li{
        display: block;
        width: 100%;
      }
      nav ul li a:hover{
        box-shadow: none;
      }
      .show{
        display: block;
        color: white;
        font-size: 18px;
        padding: 0 20px;
        line-height: 70px;
        cursor: pointer;
      }
      .show:hover{
        color: cyan;
      }
      .icon{
        display: block;
        color: white;
        position: absolute;
        top: 0;
        right: 40px;
        line-height: 70px;
        cursor: pointer;
        font-size: 25px;
      }
      nav ul ul{
        top: 70px;
        border-top: 0px;
        float: none;
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
      }
      nav ul ul a{
        padding-left: 40px;
      }
      nav ul ul ul a{
        padding-left: 80px;
      }
      nav ul ul ul li{
        position: static;
      }
      [id^=btn]:checked + ul{
        display: block;
      }
      nav ul ul li{
        border-bottom: 0px;
      }
      span.cancel:before{
        content: '\f00d';
      }
    }
    .content{
      z-index: -1;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      text-align: center;
    }
    header{
      font-size: 35px;
      font-weight: 600;
      padding: 10px 0;
    }
    p{
      font-size: 30px;
      font-weight: 500;
    }

<div>
     <nav>
          <div class="logo">
    Davids Nav</div>
    <label for="btn" class="icon">
            <span class="fa fa-bars"></span>
          </label>
          <input type="checkbox" id="btn">
          <ul>
    <li><a href="#">Home</a></li>
    <li>
              <label for="btn-1" class="show">Features +</label>
              <a href="#">Features</a>
              <input type="checkbox" id="btn-1">
              <ul>
    <li><a href="#">Pages</a></li>
    <li><a href="#">Elements</a></li>
    <li><a href="#">Icons</a></li>
    </ul>
    </li>
    <li>
              <label for="btn-2" class="show">Services +</label>
              <a href="#">Services</a>
              <input type="checkbox" id="btn-2">
              <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">App Design</a></li>
    <li>
                  <label for="btn-3" class="show">More +</label>
                  <a href="#">More <span class="fa fa-plus"></span></a>
                  <input type="checkbox" id="btn-3">
                  <ul>
    <li><a href="#">Submenu-1</a></li>
    <li><a href="#">Submenu-2</a></li>
    <li><a href="#">Submenu-3</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </nav>
        
         
    </div>

坦纳·杜比（Tanner Dolby）

在我的浏览器上，以969px的视口宽度显示，媒体查询导致<ul>隐藏。我更新了该查询，并以700px添加了另一个查询。您可以完成其余的媒体查询，以实现完全响应的导航。

接下来，为了有导航栏始终坚持，同时滚动视口的顶部，添加position: fixed沿top: 0

试试看

* {
      margin: 0;
      padding: 0;
      }
    nav {
      position: fixed;
      width: 100%;
      top: 0;
      background: #1b1b1b;
      display:flex;
      justify-content:space-around;
    }
    nav:after {
      content: '';
      clear: both;
      display: table;
    }
    nav .logo{
      
      color: white;
      font-size: 27px;
      font-weight: 600;
      line-height: 70px;
      padding-left: 60px;
    }
    nav ul{
      float: right;
      margin-right: 40px;
      list-style: none;
      position: relative;
    }
    nav ul li{
      
      display: inline-block;
      background: #1b1b1b;
      margin: 0 5px;
    }
    nav ul li a{
      color: white;
      line-height: 70px;
      text-decoration: none;
      font-size: 18px;
      padding: 8px 15px;
    }
    nav ul li a:hover{
      color: cyan;
      border-radius: 5px;
      box-shadow:  0 0 5px #33ffff,
                   0 0 10px #66ffff;
    }
    nav ul ul li a:hover{
      box-shadow: none;
    }
    nav ul ul{
      position: absolute;
      top: 90px;
      border-top: 3px solid cyan;
      opacity: 0;
      visibility: hidden;
      transition: top .3s;
    }
    nav ul ul ul{
      border-top: none;
    }
    nav ul li:hover > ul{
      top: 70px;
      opacity: 1;
      visibility: visible;
    }
    nav ul ul li{
      position: relative;
      margin: 0px;
      width: 150px;
      float: none;
      display: list-item;
      border-bottom: 1px solid rgba(0,0,0,0.3);
    }
    nav ul ul li a{
      line-height: 50px;
    }
    nav ul ul ul li{
      position: relative;
      top: -60px;
      left: 150px;
    }
    .show,.icon,input{
      display: none;
    }
    .fa-plus{
      font-size: 15px;
      margin-left: 40px;
    }
    @media all and (max-width: 968px) {
      nav ul {
        display: flex;
        font-size: 1rem;
      }
      nav .logo{
        padding-left: 30px;
        width: 100%;
      }
      .show + a, ul{
        display: none;
      }
      nav ul li,nav ul ul li{
        display: block;
        width: 100%;
      }
      nav ul li a:hover{
        box-shadow: none;
      }
      .show{
        display: block;
        color: white;
        font-size: 18px;
        padding: 0 20px;
        cursor: pointer;
      }
      .show:hover{
        color: cyan;
      }
      .icon{
        display: block;
        color: white;
        position: absolute;
        top: 0;
        right: 40px;
        line-height: 70px;
        cursor: pointer;
        font-size: 25px;
      }
      nav ul ul{
        top: 70px;
        border-top: 0px;
        float: none;
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
      }
      nav ul ul a{
        padding-left: 40px;
      }
      nav ul ul ul a{
        padding-left: 80px;
      }
      nav ul ul ul li{
        position: static;
      }
      [id^=btn]:checked + ul{
        display: block;
      }
      nav ul ul li{
        border-bottom: 0px;
      }
      span.cancel:before{
        content: '\f00d';
      }
    }
    .content{
      z-index: -1;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      text-align: center;
    }
    header{
      font-size: 35px;
      font-weight: 600;
      padding: 10px 0;
    }
    p{
      font-size: 30px;
      font-weight: 500;
    }
    
@media only screen and (max-width: 700px) {
    nav {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    nav .logo {
      line-height: 40px;
    }
}

<div>
     <nav>
          <div class="logo">
    Davids Nav</div>
    <label for="btn" class="icon">
            <span class="fa fa-bars"></span>
          </label>
          <input type="checkbox" id="btn">
          <ul>
    <li><a href="#">Home</a></li>
    <li>
              <label for="btn-1" class="show">Features +</label>
              <a href="#">Features</a>
              <input type="checkbox" id="btn-1">
              <ul>
    <li><a href="#">Pages</a></li>
    <li><a href="#">Elements</a></li>
    <li><a href="#">Icons</a></li>
    </ul>
    </li>
    <li>
              <label for="btn-2" class="show">Services +</label>
              <a href="#">Services</a>
              <input type="checkbox" id="btn-2">
              <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">App Design</a></li>
    <li>
                  <label for="btn-3" class="show">More +</label>
                  <a href="#">More <span class="fa fa-plus"></span></a>
                  <input type="checkbox" id="btn-3">
                  <ul>
    <li><a href="#">Submenu-1</a></li>
    <li><a href="#">Submenu-2</a></li>
    <li><a href="#">Submenu-3</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </nav>
        
         
    </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。