показывать выпадающее меню за пределами боковой панели с прокруткой, но в том же положении, что и привязка

Question

Как и в Facebook, при наведении курсора на изображение друга оно показывает выпадающее меню вне левой боковой панели друзей,

Я дал абсолютную позицию раскрывающегося меню относительно соответствующего приложения (позиция: относительная), но проблема в том, что при прокрутке вниз меню появляется под его тегом привязки, как я могу это исправить?

вот пример кода, который я имею, я могу реализовать это с чистым CSS или мне нужен JS?

.App {
 position: relative;
}
nav {
 overflow: auto;
 max-height: 700vh;
}
.dropMenu {
 position: absolute;
}

<div className="App">
 <nav>
  <ul>
   <li>
    <a onClick={this.showDropMenu}> ... </a>
   </li>
   <div className="dropMenu"></div>
  </ul>
 </nav>
</div>

Answer 1

Использование position: sticky;

.App{
 position: sticky;
 }
nav {
 overflow: auto;
 max-height: 700vh;
}
.dropMenu {
 position: absolute;
}

Answer 2

Это самый простой способ сделать это, используя только CSS.Возможно, вам придется реализовать другое поведение, если вы хотите иметь полнофункциональное выпадающее меню.

$(".nav li").on("mousemove", evt => {
  const li = $(evt.target);
  const dropdown = $(evt.target).find('.dropdown-menu');
  let liTop = li.offset().top;
  liTop = liTop < 0 ? liTop * -1 : liTop;
  dropdown.css('top', liTop + li.height());
})         

ul {
  list-style: none;
  overflow-y: auto;
  height: 100px;
  width: 400px;
}
ul li {
  margin: 20px 0;
}
ul li:hover .dropdown-menu {
  display: block;
}
ul li .dropdown-menu {
  position: absolute;
  display: none;
  width: 300px;
  background-color: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
  <li>
     <a href="">Lorem 1</a>
     <div class="dropdown-menu">
        Lorem 1 <br/>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
    </div>
  </li>
  <li>
     <a href="">Lorem 2</a>
     <div class="dropdown-menu">
        Lorem 2 <br/>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
    </div>
    
  </li>
  <li>
     <a href="">Lorem 3</a>
     <div class="dropdown-menu">
        Lorem 3 <br/>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
    </div>
  </li>
  <li>
     <a href="">Lorem 4</a>
     <div class="dropdown-menu">
        Lorem 4 <br/>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
    </div>
  </li>
  <li>
     <a href="">Lorem 5</a>
     <div class="dropdown-menu">
        Lorem 5 <br/>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
    </div>
  </li>
</ul>