在垂直导航栏中使用子菜单定位菜单元素

Question

我试图将子菜单显示在所选元素的右侧（不固定在位置：

）。

子菜单关闭 子菜单打开 或多或少像我们在这里https://codepen.io/Kamilica/pen/XRbvaL。 问题在于菜单的位置是绝对的，父div（粉红色矩形）是相对的。 所以我的问题是，如何更改子菜单的位置，以便能够将子菜单从红色圆圈开始并即使在滚动时也始终保持在该位置

app.component.html

<header class="clearfix">
  <gr-topnav></gr-topnav>
</header>
<div class="all-content"> 
  <div class="side-bar-menu">
    <gr-sidebar></gr-sidebar>

  </div>



  <div class="main-col">
    <router-outlet></router-outlet>
  </div>

</div>

app.component.css

<header class="clearfix">
  <gr-topnav></gr-topnav>
</header>
<div class="all-content"> 
  <div class="side-bar-menu">
    <gr-sidebar></gr-sidebar>

  </div>



  <div class="main-col">
    <router-outlet></router-outlet>
  </div>

</div>

sidebar.component.css

.side-bar-menu{
     border: 5px solid pink; float: left; min-height: 915px; width: 5%; padding-top: 10px; position: relative; background-color:white; z-index: 1;;
}

.all-content{
    width: 100%;
    height: 100%;
    margin: 0; /* Space from this element (entire page) and others*/
    padding: 0; /*space from content and border*/
    border: 5px solid pink;
    border-width: thin;
    overflow:hidden;
    display:block;
    box-sizing: border-box;
    position: relative;
}

.main-col { background-color: #fff; border: 5px solid blue; float: left; min-height: 915px; width: 95%; padding-top: 10px; position:relative; left:0%}

sidebar.component.html

.side-bar-menu{
     border: 5px solid pink; float: left; min-height: 915px; width: 5%; padding-top: 10px; position: relative; background-color:white; z-index: 1;;
}

.all-content{
    width: 100%;
    height: 100%;
    margin: 0; /* Space from this element (entire page) and others*/
    padding: 0; /*space from content and border*/
    border: 5px solid pink;
    border-width: thin;
    overflow:hidden;
    display:block;
    box-sizing: border-box;
    position: relative;
}

.main-col { background-color: #fff; border: 5px solid blue; float: left; min-height: 915px; width: 95%; padding-top: 10px; position:relative; left:0%}