垂直下拉菜单是否会将其他选项下推？

Question

因此，我正在为移动友好的网站开发Sidenav。 我在侧边栏中有一个可以正常工作的多层可悬停下拉菜单。

对于下拉菜单，我希望像在Accordian菜单中那样将其下方的链接向下推，而不是使所述链接重叠。

我看过其他解决方案，但无法将它们包裹起来。

在此先感谢您的帮助！

这是我当前的菜单代码：

 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