由于列表上的溢出，下拉菜单不能弹出此列表的左侧（减去margin-left）

Question

请参阅此小提琴：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;
}