下拉内容显示在侧面

Question

我已经创建了一个Multi-Dropdown侧面板，但是正如您从this fiddle中看到的那样，它显示了in-line。

我想要的是要显示在侧面板旁边的内容，而不是in-line。

我尝试修改每个下拉列表的display属性，但没有执行任何操作（或更糟）。并且由于这些下拉菜单是在发生hover时显示的，因此当指针位于两个下拉菜单的极限时，确实很尴尬。

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

Answer 2

我更新您的代码，如果这对您有用，请清除.dropdown-content，.dropdown-content-2上的浮点数，并将其放在顶部，以使其正确显示。

.dropdown-content{
    display:none;
    position:absolute;
    top: 44px;
    left: 0;
    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;
  cursor: pointer;
}
.dropdown-content:after{
   content: "";
   clear: both;
}

http://jsfiddle.net/ed8qazh7/8/

Answer 3

从position:absolute和.dropdown-content中删除.dropdown-content-2，您将获得所需的结果。

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