将列表向上展开超过其他内容

Question

我们目前正在使用名为Nice Select的JS插件，它将选择输入转换为可扩展的ul元素。我在可扩展的汉堡包菜单的底部有ul元素。菜单底部的li项目数导致菜单溢出并具有y滚动。为了防止这种情况，我希望li项目在菜单中的其他内容之上向上扩展。我已经玩过相对定位ul容器上方的元素，但没有取得多大成功。我在这里发布了一个关于这种情况的简单例子。谢谢你的帮助！

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我编辑了您的示例以提供基本的工作版本。我不完全确定你的意思，所以请随意提出一些改变。

from

$(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;
}

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;