javascript - 由于列表溢出，下拉菜单无法在此列表左侧弹出(减去 margin-left)

Question

引用这个 fiddle :http://jsfiddle.net/od4vjhbc/6/

基本上，当在 #contact-list 上设置溢出时，下拉菜单(当单击列表中的联系人时)不会完全显示，因为它被剪切了。

删除/评论#contact-list 上的溢出，然后弹出窗口将完全显示。

即使设置了溢出，我如何才能让它正常工作(单击联系人时完全显示菜单)？ (如果列表中有很多联系人，则需要溢出)。

如果需要，我应该对 HTML 进行什么样的结构更改？

Answer 1

将溢出应用到 .name div 而不是 #contact-list

像这样:http://jsfiddle.net/mn01ouat/

 #contact-list {
  width: 150px;
  float:right;
  padding: 0;
  margin: 0;
  max-height: 300px;
  /*overflow-y: auto;*/
}

#contact-list .name{
  width: 150px;
  max-height: 300px;
  overflow-y: auto;
}