bbs-go-site

我在滚动侧边栏中显示与父母绝对位置的div时遇到问题

我在侧边栏上具有以下结构：

<sidebar>
<scrollable menu items>
<ul>
<li>
<a />
<drop dowm div/>
</li>
</ul>
</scrollable menu items>
</sidebar>

但我无法在屏幕上显示绝对位置的div（下拉项）：

我的代码：

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow:hidden;
}

.container{
  height:100%;
    overflow:hidden;
}
.main{
  display: flex;
}
.header{
  height: 65px;
  background: #3c8dbc;
  display: flex;
  box-shadow: 0 2px 2px rgba(0,0,0,0.05), 0 1px 0 rgba(0,0,0,0.05);
  position: relative;
  z-index: 1;
}

.content{
  height: 100%;
    width: 100%;
    background: #eee;
}
.test{
  overflow-y: auto;
    padding: 100px;
    height: 100%;
}

.scrollside{
    position: relative;
    height: calc(100% - 50px);
    overflow: auto !important;
}
.sidebar{
    max-width: 75px;
    width: 100%;
    color: #009688;
    background: #3c8dbc;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.menu-ul{
    font-family: "Ubuntu";
    font-size: 14px;
    font-weight: 300;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: #fff;
        margin: 0;
    padding: 0;
    list-style: none;
}
.menu-li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    cursor: pointer;
    position: relative;
}
.menu-a{
  padding: 12px;
}
.dropdown{
  display: block;
    height: 400px !important;
    width: 400px !important;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    list-style-type: none;
    margin: 0;
    padding: 0;
    top: 0;
    left: 100%;
    font-weight: 400;
    position: absolute;
    padding: 0px;
    z-index: 1500;
    background: #307096;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

<div class="container">
<div class="header">
header
</div>
<div class="main">
<div class="sidebar">
  <div class="scrollside">
  <ul class="menu-ul">
  <li class="menu-li">
     <a class="menu-a">DropDown</a>
     <div class="dropdown">
     aaaaa
     </div>
  </li>
    <li class="menu-li">
     <a class="menu-a">DropDown 2</a>
     <div class="dropdown">
     aaaaa
     </div>
  </li>
  </ul>
  </div>
</div>
<div class"content">
<div class="test">
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
</div>
</div>
</div>
</div>

我知道问题出在我父母的div中，但我不知道如何解决，因为我需要滚动此侧边栏菜单

在可滚动的侧边栏中显示与父母绝对位置的div的问题