Question

在我的聊天应用程序中，我有一个联系人列表，当您点击某个联系人时，它会在联系人左侧打开一个下拉菜单（类似http://screencast.com/t/uM643uwd69CB），但上面有溢出自动联系人列表，它没有出现。

HTML看起来像

  <ul id="contact-list">
    <li ng-repeat="contact in contacts | orderBy: '-isOnline': false" ng-controller="contactItemController" ng-dblclick="chatWithUser(contact)" ng-click="contactItemClick($event)">
      </div>
      <div class="name">{{ contact.username }}</div>
      <ul ng-hide="popoverHide" class="contact-dropdown">
        <button ng-click="chatWithUser(contact)" ng-disabled="!isChatAvailableForTheContact(contact)">{{ !contact.isOnline ? 'Leave a' : 'Instant' }} Message</button>
      </ul>
    </li>
  </ul>

CSS看起来像

#contact-list {
  width: 100%;
  padding: 0;
  margin: 0;
  /*overflow: auto;*/
}
#contact-list li {
  list-style: none;
  position: relative;
}
#contact-list li .contact-dropdown {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -150px;
}
#contact-list li .contact-dropdown button {
  width: 100%;
  color: #0077CC;
  background: none;
  border: none;
  cursor: pointer;
}
#contact-list li .contact-dropdown button:disabled {
  color: gray;
}

在overflow-y: auto;中设置#contacts-list时，单击列表项时不会弹出弹出菜单。但是，如果没有设置，弹出菜单会弹出。有什么想法吗？

http://jsfiddle.net/od4vjhbc/1/

在父div上使用溢出时不会出现弹出窗口

0 个答案: