Liste nach oben über anderen Inhalt erweitern

Question

Wir verwenden derzeit ein JS-Plugin namens Nice Select, das ausgewählte Eingaben in erweiterbare ul-Elemente konvertiert. Ich habe das ul-Element am unteren Rand eines erweiterbaren Hamburger-Menüs. Die Anzahl der li-Elemente am unteren Ende des Menüs führt dazu, dass das Menü überläuft und y-scroll ist. Um dies zu verhindern, möchte ich, dass die li-Elemente sich über dem anderen Inhalt des Menüs nach oben erstrecken. Ich habe herumgespielt mit relativ Positionierung der Elemente über dem UL-Container, aber hatte nicht viel Erfolg. Ich habe hier ein schnelles Beispiel der Situation gepostet. Danke für Ihre Hilfe!

$(function() { 
 
    $('.list').toggle(); 
 
    $(".current").click(function() { 
 
    $('.list').toggle(); 
 
    }); 
 
    $(".option").click(function() { 
 
    $('.current').text($(this).text()); 
 
    }); 
 
})

.container { 
 
    width: 100%; 
 
    height: auto; 
 
    position: absolute; 
 
    border: 3px solid black; 
 
} 
 

 
.content { 
 
    background-color: red; 
 
    height: 200px; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="content"> 
 

 
    </div> 
 
    <div class="menu 
 
    "><span class="current" style="">United States</span> 
 
    <ul class="list"> 
 
     <li class="option">United Arab Emirates</li> 
 
     <li class="option">United States</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

ich dein Beispiel bearbeitet haben Version eine grundlegende Arbeits zur Verfügung zu stellen. Ich bin mir nicht ganz sicher, was Sie gemeint haben, also zögern Sie nicht, einige Änderungen vorzuschlagen.

$(function() { 
 
    $('.list').toggle(); 
 
    $(".current").click(function() { 
 
    $('.list').toggle(); 
 
    }); 
 
    $(".option").click(function() { 
 
    $('.current').text($(this).text()); 
 
    }); 
 
})

.container { 
 
    width: 100%; 
 
    height: auto; 
 
    position: absolute; 
 
} 
 

 
.content { 
 
    background-color: red; 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 

 
.menu { 
 
    // 
 
} 
 

 
.menu ul { 
 
    position: relative; 
 
} 
 

 
.menu ul li { 
 
    position: relative; 
 
    top: -100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="content"> 
 

 
    </div> 
 
    <div class="menu"> 
 
    <span class="current" style="">United States</span> 
 
    <ul class="list"> 
 
     <li class="option">United Arab Emirates</li> 
 
     <li class="option">United States</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

$(function() { 
 
    $('.list').toggle(); 
 
    $(".current").click(function() { 
 
    $('.list').toggle(); 
 
    }); 
 
    $(".option").click(function() { 
 
    $('.current').text($(this).text()); 
 
    }); 
 
})

.container { 
 
    width: 100%; 
 
    height: auto; 
 
    position: absolute; 
 
    border: 3px solid black; 
 
} 
 

 
.content { 
 
    background-color: red; 
 
    height: 150px; 
 
    width: 100%; 
 
} 
 
.menu{ 
 
    position:relative; 
 
} 
 
.list{ 
 
position:absolute; 
 
bottom:20px; 
 
    left:0; 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    border:1px solid black; 
 
    box-sizing:border-box; 
 
} 
 
.list li{ 
 
background-color:white; 
 
width:100%; 
 
    display:block; 
 
    border:1px solid black; 
 
    box-sizing:border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="content"> 
 

 
    </div> 
 
    <div class="menu 
 
    "><span class="current" style="">United States</span> 
 
    <ul class="list"> 
 
     <li class="option">United Arab Emirates</li> 
 
     <li class="option">United States</li> 
 
    </ul> 
 
    </div> 
 
</div>