響應式固定導航欄，子菜單列表不滾動

Question

我知道有很多帖子都在談論它，我閱讀了大多數帖子並沒有幫助我。 我有一個我正在工作的學校的網站，導航欄在台式機上運行良好，但在移動設備上卻不行。 當我按下漢堡菜單圖標並顯示導航欄時，頁面滾動但導航欄靜止，我希望相反的情況發生。 當我 hover 時，我希望在桌面上顯示子菜單名稱，但在移動設備上，我希望它在點擊后保留，直到我點擊其他內容。 我需要你的幫助，拜托。

我刪除了一些代碼以使其更易於閱讀。

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>

Answer 1

更改position: absolute; 在position: fixed;

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