Ориентация элементов меню с подменю на вертикальной панели навигации

Question

Я пытаюсь разместить отображаемое подменю с правой стороны выбранного элемента (без определения положения: фиксированный).

Подменю закрыто Подменю открыто Более или менее, как у нас здесь https://codepen.io/Kamilica/pen/XRbvaL. Проблема в том, что позиция меню абсолютная, а родительский div (розовый прямоугольник) относительный.Поэтому мой вопрос: как я могу изменить положение подменю, чтобы подменю можно было начинать с красного круга и всегда сохранять его в этом положении, даже когда мы прокручиваем

app.component.html

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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.css

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>[data-component='sidebar'] .first-menu {
  position: absolute;
  top: 0px;
  left: 0;
  height: 100%;
  background-color: #292a2c;
  width: 75px;
  overflow: hidden;
  transition: width 0.5s;

}
[data-component='sidebar'] .first-menu a {
  color: white;
}
[data-component='sidebar'] .first-menu i {
  font-size: 24px;
}
[data-component='sidebar'] .first-menu span {
  font-size: 14px;
  white-space: nowrap;
  font-family: 'Open Sans', sans-serif;
  opacity: 0;
  visibility: hidden;
  color: aliceblue
}
[data-component='sidebar'] .first-menu:hover span {
  opacity: 1;
  visibility: visible;
}
[data-component='sidebar'] .first-menu .list-group-item {
  border-radius: 0;
  position: relative;

}
[data-component='sidebar'] .first-menu .list-group-item:hover {
  background-color: #9932CC;
  

}
[data-component='sidebar'] .first-menu:hover {
  width: 190px;
}
[data-component='sidebar'] .list-group-item {
  font-size: 14px;
  background: #9932CC
}
[data-component='sidebar'] .submenu {
  /* position: absolute;
  left: 110px;
  width: 100%;
  top: 0px;
  background-color: #9932CC;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition:  opacity 600ms,  visibility 600ms;
   */
   position: fixed;
  left: 195px;
  width: 195px;
  top: 60px;
  background-color:#9932CC;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition:  opacity 600ms,  visibility 600ms;
  
}
[data-component='sidebar'] .submenu .list-group-item {
  margin-top: 8px;
}
[data-component='sidebar'] .first-menu li:hover .submenu {
  visibility: visible;
  opacity: 1;
  
 
}

[data-component='sidebar'] .list-group-item {
  background-color: transparent;
  border: none;
  border-radius: 0;

}

sidebar.component.html

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <div data-component="sidebar">
        <div class="sidebar">
        <ul class="list-group flex-column d-inline-block first-menu">
          <li class="list-group-item pl-3 py-2">
            <a href="#"><i class="fa fa-desktop" aria-hidden="true"><span class="ml-2 align-middle">Dashboard</span></i></a>

          </li> <!-- /.list-group-item -->
          
          <li class="list-group-item pl-3 py-2">
            <a href="#"><i class="fab fa-accusoft" aria-hidden="true"><span class="ml-2 align-middle">Groups & Rec</span></i></a>
            
          </li> <!-- /.list-group-item -->
          
          <li class="list-group-item pl-3 py-2">
            <a href="#">
              <i class="fab fa-bandcamp" aria-hidden="true"><span class="ml-2 align-middle">Platforms</span></i>
            </a>
           
          </li> <!-- /.list-group-item -->
          
          
          <li class="list-group-item pl-3 py-2">
            <a href="#"><i class="fas fa-truck" aria-hidden="true"><span class="ml-2 align-middle">Delivery</span></i></a>
            
            <ul class="list-group flex-column d-inline-block submenu">
              <li class="list-group-item pl-4">
                <a href="#" class="">Report Dome</a>
                
              
                
              </li>
              <li class="list-group-item pl-4">
                <a href="#" class="">Deploy Rappro</a>
                
                
              
              </li>
            </ul>
          </li>
          
          <li class="list-group-item pl-3 py-2">
            <a href="#"><i class="fas fa-tools" aria-hidden="true"><span class="ml-2 align-middle">Tools</span></i></a>
            <ul class="list-group flex-column d-inline-block submenu">
              <li class="list-group-item pl-4">
                <a href="#" class="">Duplicate Platform</a>
                
        
              
              </li>
              
            </ul>
          
          </li>
          
          <li class="list-group-item pl-3 py-2">
            <a href="#"><i class="fa fa-crosshairs" aria-hidden="true"><span class="ml-2 align-middle">Tests</span></i></a>
            <ul class="list-group flex-column d-inline-block submenu">
              <li class="list-group-item pl-4">
                <a href="#" class="">Rules</a>
                
                
              
              </li>
              <li class="list-group-item pl-4">
                <a href="#" class="">Execution</a>
                
                
              
              </li>
           
            </ul>
          
          </li>

          <li class="list-group-item pl-3 py-2">
                <a href="#"><i class="far fa-flag" aria-hidden="true"><span class="ml-2 align-middle">Report</span></i></a>
                <ul class="list-group flex-column d-inline-block submenu">
                  <li class="list-group-item pl-4">
                    <a href="#" class="">Active List Report</a>
                    
                    
                  
                  </li>
                 
               
                </ul>
              
             </li>

             <li class="list-group-item pl-3 py-2">
                    <a href="#"><i class="far fa-flag" aria-hidden="true"><span class="ml-2 align-middle">Statistics</span></i></a>
                    <ul class="list-group flex-column d-inline-block submenu">
                      <li class="list-group-item pl-4">
                        <a href="#" class="">Execution</a>
                        
                        
                      
                      </li>
                     
                   
                    </ul>
                  
                 </li>
                 <li class="list-group-item pl-3 py-2">
                        <a href="#">
                          <i class="fas fa-user-check" aria-hidden="true"><span class="ml-2 align-middle">Astreinte</span></i>
                        </a>
                       
                </li>
               
          
          
        </ul> <!-- /.first-menu -->
      </div> <!-- /.sidebar -->
      </div>