html - 下拉菜单问题

Question

我正在尝试为项目制作标题。会有下拉菜单。但是移动兼容性存在如下问题。

在 991 像素以上和 991 像素以下工作时看起来像这样，这很烦人。你能帮我吗？

$('.main-d-l').hover(
    function(){ $('.arrow').addClass('fa-rotate-270') },
    function(){ $('.arrow').removeClass('fa-rotate-270') }
)

$(document).ready(function(){
    
    // Toggle Navigation Bar
    $('.hamburger-menu').click(function(){
        $('.nav-btn').toggleClass("active");
        $('.hamburger-menu').toggleClass("active");
    });
    
    // Toggle Dropdown Menu
    $('.main-dropdown-link').click(function(){
        $('.dropdown').toggleClass("active");
    });
    
});

header {
  position: fixed;
  top: 0;
  background-color: #fff;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 0px 10px 5px rgba(0, 0, 0, .05);
}

header .container {
  width: 100%;
  max-width: 120rem;
  height: 7rem;
  margin: 0px auto;
  display: flex;
  position: relative;
}

header .container .logo-container {
  display: flex;
  align-items: center;
}

header .container .logo-container img {
  height: 7rem;
}

header .container .logo-container h1 {
  font-family: 'Arima Madurai', cursive;
  font-weight: 900;
  margin-bottom: 0px;
  font-size: 2rem;
}

header .container .logo-container h1 a {
  text-decoration: none;
  color: #503775;
}

header .container .nav-btn {
  flex: 3;
  display: flex;
}

header .container .nav-btn .nav-links {
  flex: 2;
}

header .container .nav-btn .nav-links>ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

header .container .nav-btn .nav-links ul .nav-link {
  position: relative;
  cursor: pointer;
  height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 20px;
  transition: .3s;
}

header .container .nav-btn .nav-links ul .nav-link:hover {
  background-color: #95389E;
}

header .container .nav-btn .nav-links ul .nav-link>a {
  position: relative;
  width: 100%;
  font-size: 1.5rem;
  height: 7rem;
  color: #95389E;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: .3s;
}

header .container .nav-btn .nav-links ul .nav-link:hover>a {
  color: #fff;
}

header .container .nav-btn .nav-links ul .nav-link>a i {
  margin-right: 5px;
}

header .container .nav-btn .search-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

header .container .nav-btn .search-box form {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2px solid #e0e0e0;
  height: 7rem;
}

header .container .nav-btn .search-box form input {
  font-size: 1.2rem;
  padding: 8px;
  border: none;
  outline: 0;
  width: 15rem;
}

header .container .nav-btn .search-box form button {
  height: 7rem;
  padding: 0px 1rem;
  border: none;
  background-color: #fff;
  font-size: 1.8rem;
  color: #5A5A5A;
  transition: .3s;
}

header .container .nav-btn .search-box form button:hover {
  color: #95389E;
}

header .container .nav-btn .nav-links ul .nav-link .main-dropdown-link .arrow {
  margin-left: 5px;
  transition: .3s;
}

header .container .nav-btn .nav-links ul .nav-link .dropdown {
  position: absolute;
  top: 70px;
  left: 0;
  width: 30rem;
  border-radius: 0px 0px 5px 5px;
  background-color: #fff;
  border-top: 2px solid #95389E;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  transform: translateY(0px);
  opacity: 0;
  pointer-events: none;
  transition: .5s;
}

header .container .nav-btn .nav-links ul .nav-link .dropdown ul {
  list-style: none;
  position: relative;
  padding: 10px 5px;
}

header .container .nav-btn .nav-links ul .nav-link .dropdown ul .dropdown-link>a {
  display: flex;
  color: #95389E;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  padding: .6rem 1rem;
  align-items: center;
  justify-content: space-between;
  transition: .3s;
}

header .container .nav-btn .nav-links ul .nav-link .dropdown ul .dropdown-link>a:hover {
  padding-left: 2rem;
}

header .container .nav-btn .nav-links ul .nav-link:hover>.dropdown {
  transform: translate(0, 0);
  opacity: 1;
  pointer-events: auto;
}

header .container .hamburger-menu-container {
  flex: 1;
  display: none;
  align-items: center;
  justify-content: flex-end
}

header .container .hamburger-menu-container .hamburger-menu {
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

header .container .hamburger-menu-container .hamburger-menu div {
  width: 3.6rem;
  height: 4px;
  border-radius: 1px;
  background-color: #95389E;
  position: relative;
  z-index: 1001;
  transition: .5s;
}

header .container .hamburger-menu-container .hamburger-menu div::after,
header .container .hamburger-menu-container .hamburger-menu div::before {
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  background-color: #95389E;
  border-radius: 1px;
  transition: .5s;
}

header .container .hamburger-menu-container .hamburger-menu div::before {
  transform: translateY(-12px);
}

header .container .hamburger-menu-container .hamburger-menu div::after {
  transform: translateY(12px);
}

header .container .hamburger-menu-container .hamburger-menu.active div {
  background-color: transparent;
}

header .container .hamburger-menu-container .hamburger-menu.active div::before {
  transform: translateY(0) rotate(-45deg);
}

header .container .hamburger-menu-container .hamburger-menu.active div::after {
  transform: translateY(0) rotate(45deg);
}

@keyframes headerAnimation {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991px) {
  header .container .hamburger-menu-container {
    display: flex
  }
  header .container #check {
    display: block
  }
  header .container .nav-btn {
    position: fixed;
    height: calc(100vh - 7rem);
    top: 7rem;
    right: -100%;
    width: 100%;
    background-color: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow-x: hidden;
    overflow-y: auto;
    transition: .6s
  }
  header .container .nav-btn .nav-links {
    flex: initial;
    width: 100%
  }
  header .container .nav-btn .nav-links>ul {
    justify-content: center;
    flex-direction: column
  }
  header .container .nav-btn .nav-links ul .nav-link {
    width: 100%;
    transition: .3s;
    opacity: 0;
    transform: translateY(15px)
  }
  header .container .nav-btn .nav-links ul .nav-link>a {
    line-height: 1;
    padding: 1.6rem 2rem
  }
  header .container .nav-btn .nav-links ul .nav-link>a i {
    display: none;
  }
  header .container .nav-btn .nav-links ul .nav-link>a i.arrow {
    display: block;
  }
  header .container .nav-btn .nav-links ul .nav-link>a:hover {
    padding-left: 30px
  }
  header .container .nav-btn .nav-links ul .nav-link>a::before {
    display: none
  }
  header .container .nav-btn .nav-links ul .nav-link .dropdown {
    position: initial;
    top: initial;
    left: initial;
    transform: initial;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
    padding: 0;
    display: none;
  }
  header .container .nav-btn .nav-links ul .nav-link>.dropdown.active {
    display: block;
  }
  header .container .nav-btn.active {
    right: 0
  }
  .nav-btn.active ul .nav-link {
    animation: headerAnimation .3s ease forwards .6s
  }
}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <!-- Custom Style -->
        <link rel="stylesheet" href="css/style.css">
    
        <!-- Library -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    
        <!-- FontAwesome -->
        <script src="https://kit.fontawesome.com/cd25521a32.js" async crossorigin="anonymous"></script>
    
    </head>
    <body>
    
        <!-- Header -->
        <header>
          <div class="container">
            <div class="logo-container">
              <a href="index.html" title="RaBlogin">
                <img src="img/RaBlogin.png" alt="RaBlogin">
              </a>
              <h1><a href="index.html">RaBlogin</a></h1>
            </div>
    
            <nav class="nav-btn">
              <div class="nav-links">
                <ul>
                  <li class="nav-link">
                    <a href="index.html"><i class="fas fa-home"></i> Anasayfa</a>
                  </li>
    
                  <li class="nav-link main-d-l">
                    <a class="main-dropdown-link"><i class="fas fa-th-list"></i> Kategoriler <i class="fas fa-chevron-down arrow"></i></a>
                    <div class="dropdown">
                      <ul>
                        <li class="dropdown-link">
                          <a href="#">Blog</a>
                        </li>
                        <li class="dropdown-link">
                          <a href="#">SEO</a>
                        </li>
                        <li class="dropdown-link">
                          <a href="#">WordPress</a>
                        </li>
                        <li class="dropdown-link">
                          <a href="#">Web Yazılımları</a>
                        </li>
                        <li class="dropdown-link">
                          <a href="#">Genel Yazılar</a>
                        </li>
                      </ul>
                    </div>
                  </li>
    
                  <li class="nav-link">
                    <a href="#"><i class="fas fa-bookmark"></i> Hakkımızda</a>
                  </li>
    
                  <li class="nav-link">
                    <a href="#"><i class="far fa-comment"></i> İletişim</a>
                  </li>
                </ul>
              </div>
              <div class="search-box">
                <form action="">
                  <input type="text" placeholder="Arama Yap...">
                  <button type="submit" class="search-icon"><i class="fas fa-search"></i></button>
                </form>
              </div>
            </nav>
            <div class="hamburger-menu-container">
              <div class="hamburger-menu">
                <div></div>
              </div>
            </div>
          </div>
        </header>
        <!-- Header End -->
    <!-- Scripts -->
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    
        <script src="js/script.js"></script>
    
    </body>
    </html>

我怎么解决这个问题？移动版中，下拉部分不推送其他元素，停留在侧边。

标签： htmlcssdrop-down-menu