javascript - 在有滚动条的侧边栏外显示下拉菜单，但仍与 anchor 处于相同位置

Question

像 facebook，当鼠标悬停在 friend 的图像上时，它会在 friend 的左侧栏中显示下拉菜单，

我给了下拉菜单相对于应用程序本身的绝对位置(position:relative)，但问题是当向下滚动菜单出现在其 anchor 标记下方时，我该如何修复它？

这是我的代码示例，我可以用纯 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;
}