Javascript 向下推送其他选项的垂直下拉菜单？

因此，我正在为一个手机友好网站开发Sidenav。我在侧边栏中有一个可运行的多级可悬停下拉菜单

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

我见过其他的解决方案，但我很难对它们进行思考

提前感谢您的帮助

以下是我当前的菜单代码：

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“20%”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； }

正文{
字体系列：半人马；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
右：0；
背景色：黑色；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.侧导航{
填充顶部：15px；
}
.侧导航a{
字号：18px；
}
.dropbtn{
背景色：透明；
填充：2%；
字体大小：100%；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉列表1{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
右：0；
最小宽度：160px；
z指数：1；
}
.下拉列表内容1{
显示：无；
位置：绝对位置；
右：0；
最小宽度：160px；
z指数：1；
}
.下拉列表-1 a{
文字装饰：无；
显示：块；
}
.下拉内容a{
文字装饰：无；
显示：块；
}
.dropdown1:悬停。下拉列表-content1{
显示：块；
}
.下拉：悬停.下拉内容{
显示：块；
}

☰；菜单

使用此

JS

CSS

HTML

☰；菜单

使用这个

JS

CSS

HTML

☰；菜单

---

类似的内容？与我尝试的内容非常相似，但我希望它可以在桌面上悬停，并且在光标离开该选项后可以折叠。我试图通过确保整个菜单不会处于展开状态来避免滚动条，除非用户正在积极悬停。类似的内容？与我非常相似正在尝试，但我希望它可以在桌面上悬停，并在光标离开该选项后可折叠。我试图通过确保整个菜单不能处于展开状态来避免滚动条，除非用户正在积极悬停。谢谢！~要详细说明我正在尝试做的事情…我需要从右侧滑入菜单en菜单选项处于活动状态。我只需要可悬停的下拉列表，在使用时可以向下推其他选项，同时在菜单不再悬停时重新折叠。就像手风琴菜单一样，没有所有的点击。谢谢！~要详细说明我正在尝试做什么…我需要在菜单选项处于活动状态时从右侧滑入菜单我只是想要一个可悬停的下拉菜单，它在使用时会向下推其他选项，而一旦菜单不再悬停，它就会重新折叠。就像一个手风琴菜单，没有所有的点击。

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

   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;
    }

  <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>