响应式固定导航栏，子菜单列表不滚动答案

【问题标题】：responsive fixed navigation bar with a tall submenu list not scrolling响应式固定导航栏，子菜单列表不滚动
【发布时间】：2021-04-01 22:54:45
【问题描述】：

我知道有很多帖子在谈论它，我阅读了大部分内容并没有帮助我。我有一个我正在工作的学校的网站，导航栏在台式机上运行良好，但在移动设备上却不行。当我按下汉堡菜单图标并显示导航栏时，页面滚动但导航栏静止不动，我希望相反的情况发生。我希望当我将子菜单名称悬停在桌面上时显示，但在移动设备上我希望它在点击后保持不变，直到我点击其他内容。我需要你的帮助。

为了便于阅读，我删除了一些代码。

HTML：

.header {
  width: 100%;
  height: 768px;
  position: relative;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0px 30px;
  z-index: 1;
  width: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
}

nav ul {
  display: flex;
  margin: 0px;
  padding: 0px;
}

nav ul li a { 
  display: flex;
}

nav ul ul {
  display: none;
  position: absolute;
}

nav ul li a:hover + .dropdown,
nav ul li a:active + .dropdown {
  display: block;
}

nav ul ul:hover {
  display: block;
}

/* Responsive */

@media (max-width:950px) {
  nav {
    justify-content: space-between;
  }

  .menu {
    display: none;
    position: absolute;
    top: 65px;
    left: 0px;
    width: 100%;
    height: 100vh !important;
  }

  nav ul ul{
    position: relative;
    width: 100%;
    width: 95% !important;
  }

  nav .menu-icon {
    float: right;
    position: relative;
  }
}

<section class="header">
   <nav>
       <a href="#" class="logo">
           <img src="images/akef_logo.png" alt="akef_logo">
       </a>
<!-- For Responsive Menu -->
       <input type="checkbox" id="menu-btn" class="menu-btn">
       <label for="menu-btn" class="menu-icon">
       <span class="nav-icon"></span>
       </label>
       <!-- Navigation -->
       <ul class="menu">

           <li><a href="#" class="active">Home</a></li>
           <li><a href="#about">About</a></li>
           <li><a>Classes</a>
             <ul class="dropdown">
               <li><a href="#">3rd Grade</a></li>
               <li><a href="#">4th Grade</a></li>
               <li><a href="#">5th Garde</a></li>
               <li><a href="#">6th Garde</a></li>
               <li><a href="#">7th Garde</a></li>
               <li><a href="#">8th Garde</a></li>
               <li><a href="#">9th Garde</a></li>
               <li><a href="#" class="g-10th">10th Garde</a></li>
             </ul>
           </li>
           <li><a href="#">Teachers</a></li>
           <li><a href="#">School News</a></li>
           <li><a href="#">Blog</a></li>
           <li><a href="#" class="last-a">Contact</a></li>
       </ul>
   </nav>
</section>

【问题讨论】：

标签： javascript html css

【解决方案1】：

在position: fixed;上更改position: absolute;

.menu {
  display: none;
  position: fixed;
  top: 65px;
  left: 0px;
  width: 100%;
  height: 100vh !important;
}

【讨论】：