如何在下拉菜單中使div下推另一個div

Question

我使用div製作了一個下拉菜單（垂直），但我無法獲得下拉內容來按下其他菜單（這是溢出的）。

我注意到，當我把代碼放到JSFiddle中時，它根本沒有顯示下拉列表，所以我希望這張圖有幫助。

Picture of Issue

/*jQuery time*/ 
 
$(document).ready(function() { 
 
    $("#sidebar_menu .dropbtn").click(function() { 
 
    //slide up all the link lists 
 
    $("#sidebar_menu .dropdown-content").slideUp(); 
 
    //slide down the link list below the h3 clicked - only if its closed 
 
    if (!$(this).next().is(":visible")) { 
 
     $(this).next().slideDown(); 
 
    } 
 
    }) 
 
})

#menu_container { 
 
    display: block; 
 
    position: fixed; 
 
    width: 250px; 
 
    background-image: url("D:/Website/Website/MyBB_Website/Test/images/black_filter.jpg"); 
 
    background-repeat: repeat; 
 
    height: 100%; 
 
} 
 
#sidebar_menu { 
 
    margin-top: 15px; 
 
} 
 
/* The container <div> - needed to position the dropdown content */ 
 

 
#sidebar_menu .dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
/* Style The Dropdown Button */ 
 

 
#sidebar_menu .dropbtn { 
 
    background-color: #2383AF; 
 
    color: white; 
 
    padding: 12px; 
 
    font-size: 15px; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 250px; 
 
} 
 
/* Dropdown Content (Hidden by Default) */ 
 

 
#sidebar_menu .dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #185E7C; 
 
    min-width: 250px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
/* Links inside the dropdown */ 
 

 
#sidebar_menu .dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
/* Change color of dropdown links on hover */ 
 

 
#sidebar_menu .dropdown-content a:hover { 
 
    background-color: #F1F1F1; 
 
} 
 
/* Show the dropdown menu on hover */ 
 

 
#sidebar_menuv .dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
/* Change the background color of the dropdown button when the dropdown content is shown */ 
 

 
#sidebar_menu .dropdown:hover .dropbtn { 
 
    background-color: #2383AF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu_container"> 
 
    <div id="sidebar_menu"> 
 
    <div class="dropdown"> 
 
     <button class="dropbtn">LOGIN</button> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Website Login Box Display Here</a> 
 
     </div> 
 
     <button class="dropbtn">REGISTER</button> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Register Here</a> 
 
     </div> 
 
     <button class="dropbtn">LOST PASSWORD?</button> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Get Password Here</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

#sidebar_menu .dropdown-content 

應有位置：靜態的，而不是絕對的。