javascript - 将其他选项向下推的垂直下拉菜单？

Question

所以我正在开发一个适合移动设备的 Sidenav 网站。我在侧边栏中有一个有效的多级可悬停下拉菜单。

我希望下拉菜单能够像 Accordion 菜单一样将其下方的链接推下，而不是重叠所述链接。

我见过其他解决方案，但我无法理解它们。

预先感谢您的帮助!

这是我当前的菜单代码:

function openNav() {
  document.getElementById("mySidenav").style.width = "20%";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

  body {
  font-family: Centaur;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: black;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
  .dropbtn {
    background-color: transparent;
    padding: 2%;
    font-size: 100%;
    border: none;
    cursor: pointer;
  }
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown1 {
    position: relative;
    display: inline-block;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    min-width: 160px;
    z-index: 1;
  }
  .dropdown-content1 {
    display: none;
    position: absolute;
    right: 0;
    min-width: 160px;
    z-index: 1;
  }
  .dropdown-content1 a {
    text-decoration: none;
    display: block;
  }
  .dropdown-content a {
    text-decoration: none;
    display: block;
  }
  .dropdown1:hover .dropdown-content1 {
    display: block;
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div style="width: 15%" id="navtaner">
    <a href="">Home</a>
    <div class="dropdown">
      <a class="dropbtn">Swords</a>
      <div class="dropdown-content" style=" float: right; margin-right:-55%">
        <a href="#">Museum Line</a>
        <div class="dropdown1">
          <a href="#">Next Generation</a>
          <div class="dropdown-content1">
            <a href="#">Roman Swords</a>
            <a href="#">Viking Swords</a>
            <a href="#">Medieval One-Handed Swords </a>
            <a href="#">Medieval Hand and-a-half swords</a>
            <a href="#">Medieval Two-Handed Swords</a>
            <a href="#">Single-Edged Swords</a></div>
        </div>
        <a href="#">Squire Line</a>
        <a href="#">Maestro Line</a>
        <a href="#">Skirmish Line</a>
        <a href="#">Special Edition</a>
      </div>
    </div>



    <div class="dropdown">
      <a class="dropbtn">About</a>
      <div class="dropdown-content">
        <a href="#">Albion News</a>
        <a href="#">Albion Media</a>
        <a href="#">Albion Story</a>
        <a href="#">Testimonials</a>
        <a href="#">References</a>
        <a href="#">Gallary</a>
      </div>
    </div>
    <a href="#">Order</a>
  </div>
</div>


<span style="font-size:30px;cursor:pointer; float: right" onclick="openNav()">&#9776; MENU</span>

Answer 1

使用这个

JS

    function toggleNav() {
     var element = document.getElementById("navtaner");
        element.classList.toggle("navtaner2");
    }

CSS

   body {
    font-family: Centaur;
  }
  .navtaner {
    display:none;
  }
  .navtaner2 {
    display:block;
  }
  .sidenav {
    height: ;
    width: 20%;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: black;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }

  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }

  .sidenav a:hover {
    color: #f1f1f1;
  }

  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }

  @media screen and (max-height: 450px) {
    .sidenav {
      padding-top: 15px;
    }
    .sidenav a {
      font-size: 18px;
    }
    .dropbtn {
      background-color: transparent;
      padding: 2%;
      font-size: 100%;
      border: none;
      cursor: pointer;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown1 {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      right: 0;
      min-width: 160px;
      z-index: 1;
    }
    .dropdown-content1 {
      display: none;
      position: absolute;
      right: 0;
      min-width: 160px;
      z-index: 1;
    }
    .dropdown-content1 a {
      text-decoration: none;
      display: block;
    }
    .dropdown-content a {
      text-decoration: none;
      display: block;
    }
    .dropdown1:hover .dropdown-content1 {
      display: block;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }

HTML

  <div id="mySidenav" class="sidenav">
    <span style="width:100%;font-size:30px;cursor:pointer; float: right;color:white;" onclick="toggleNav()">&#9776; MENU</span>
    <div style="width: 15%;" id="navtaner" class="navtaner">
      <a href="">Home</a>
      <div class="dropdown">
        <a class="dropbtn">Swords</a>
        <div class="dropdown-content" style=" float: right; margin-right:-55%">
          <a href="#">Museum Line</a>
          <div class="dropdown1">
            <a href="#">Next Generation</a>
            <div class="dropdown-content1">
              <a href="#">Roman Swords</a>
              <a href="#">Viking Swords</a>
              <a href="#">Medieval One-Handed Swords </a>
              <a href="#">Medieval Hand and-a-half swords</a>
              <a href="#">Medieval Two-Handed Swords</a>
              <a href="#">Single-Edged Swords</a></div>
          </div>
          <a href="#">Squire Line</a>
          <a href="#">Maestro Line</a>
          <a href="#">Skirmish Line</a>
          <a href="#">Special Edition</a>
        </div>
      </div>



      <div class="dropdown">
        <a class="dropbtn">About</a>
        <div class="dropdown-content">
          <a href="#">Albion News</a>
          <a href="#">Albion Media</a>
          <a href="#">Albion Story</a>
          <a href="#">Testimonials</a>
          <a href="#">References</a>
          <a href="#">Gallary</a>
        </div>
      </div>
      <a href="#">Order</a>
    </div>
  </div>

https://codepen.io/lafortuna18/pen/qPrwjr