javascript - 下拉内容显示在侧面

Question

我创建了一个多下拉侧面板，但正如您从 this fiddle 中看到的那样，它会内联显示它。

我想要的只是将内容显示在侧面板旁边，而不是内嵌。

我尝试修改每个下拉列表的 display 属性，但它没有任何作用(或者使情况变得更糟)。而且由于这些下拉菜单是在发生悬停时显示的，因此当指针位于两个下拉菜单的限制时，这真的很尴尬。

.sidebar {
    height: 94%;
    width: 0;
    position: fixed;
    z-index: 4;
    top: 0;
    right: 0;
    background-color: #111;
    overflow: auto;
    padding-top: 60px;
    transition: 0.5s;
}

.sidebar .dropdown {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
.sidebar .dropdown-2{
    padding: 4px 4px 4px 16px;
    text-decoration: none;
    font-size: 20px;
    display: block;
    transition: 0.3s;
}

.sidebar .dropdown:hover {background-color: #900000;color:black;}
.sidebar .dropdown-2:hover {background-color: #483D8B;}

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

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
  position:fixed;
  margin-top:25px;
  margin-right:25px;
  top:0;
  right:0;
}

.openbtn:hover {background-color: #444;}

.dropdown{position:relative; display:inline-block;}
.dropdown-2{position:relative; display:inline-block;}

.dropdown-content{
    display:none;
    position:absolute;
    background-color:#f1f1f1;
    min-width:160px;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:4;
    font-size:15px;
    color:black;
}
.dropdown-content-2{
    display:none;
    position:absolute;
    background-color:#f1f1f1;
    min-width:160px;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:4;
    font-size:15px;
    color:black;
}

.dropdown-content a{
    color:black;
    padding:24px 16px;
    text-decoration:none;
    display:block;
}
.dropdown-content-2 a{
    color:black;
    padding:24px 16px;
    text-decoration:none;
    display:block;
}

.dropdown-content a:hover{background-color:#ddd;}
.dropdown-content-2 a:hover{background-color:#ddd;}

.dropdown:hover .dropdown-content{display:block;}
.dropdown-2:hover .dropdown-content-2{display:block;}

.size{width:60px; height:40px;}

.dropdown-2 p{display: inline-block;}

a{color:white;}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

<button class="openbtn" onclick="openNav()">&#9776; Symboles pour SITAC</button>
<div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="dropdown">Sectorisation
    <div class="dropdown-content">
      <div class="dropdown-2"><p>Secteurs</p>
        <div class="dropdown-content-2">
          <p>Chef de Groupe</p><br>
          <p>Chef de colonne</p><br>
          <p>Chef de Site</p>
        </div>
      </div>
      <div class="dropdown-2"><p>Sectorisation Fonctionelle</p>
        <div class="dropdown-content-2">
          <p>Alimentation, eau</p><br>
          <p>divers</p><br>
          <p>Incendie</p><br>
          <p>SAP</p><br>
          <p>Spécialisé</p>
        </div>
      </div>
      <div class="dropdown-2"><p>Sectorisation Géographique</p>
        <div class="dropdown-content-2">
         <p>Limite Secteur Géographique</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script> //script to open the sidepanel
    function openNav(){document.getElementById("mySidebar").style.width = "250px";}
    function closeNav(){document.getElementById("mySidebar").style.width = "0px";}
</script>

这里的每个答案都是好的，但我试图复制 in here 的内容。

Answer 1

你按照这个做

   $('#nav ul').hide();

   $('#nav li > a').hover(
      function () {
      //show its submenu
        $(this).parent().children('ul').stop().slideDown(100);
      }
    );
   $('#nav li').hover(null, 
      function (e) {
      //hide its submenu
        $(this).children('ul').stop().slideUp(100);
      }
   );

这是 js 代码，您可以在此堆栈溢出答案链接上找到完整答案
DropDown multilevel menu with hover
和
这是http://jsfiddle.net/7GGab/1/