Wie man div macht drücken Sie ein anderes Div in Dropdown-Menü

Question

Ich habe ein Dropdown-Menü (vertikal) mit divs, aber ich kann nicht die Dropdown-Inhalte, um das andere Menü drücken (es ist überfüllt).

Ich bemerkte, dass, wenn ich den Code in JSFiddle legte, es das Dropdown überhaupt nicht zeigt, so hoffe ich dieses Bild zu helfen.

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 

sollte Position haben: static statt absolut.