Css问题当Scroll应用于bootstrap下拉菜单时

Question

我的下拉菜单中有大量列表。所以我已经应用了滚动。我希望始终在链接上显示我的下拉菜单。

以下是我的代码：

<div class="clean-dropdown">
 <a class="dropdown-toggle" href="javascript: void(0);" data-toggle="dropdown" id="add-more">
  add more
</a> 
 <ul class="dropdown-menu" id="dropdown-list">
  <li><a href="#" >1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li><li><a href="#">6</a></li>
 <li><a href="#">7</a></li>
 <li><a href="#">8</a></li><li><a href="#">8</a></li><li><a href="#">10</a></li>
 <li><a href="#">11</a></li>
 <li><a href="#">12</a></li><li><a href="#">13</a></li>
 <li><a href="#">14</a></li><li><a href="#">15</a></li><li><a href="#">16</a></li>
 <li><a href="#">17</a></li>
</ul>
</div>

的CSS：

#dropdown-list{
max-height: 200px;
overflow: auto;
top: 15px;
position: relative;
left: 50px
}

#add-more{
top: 224px;
position: relative;

}

这是小提琴：http://jsfiddle.net/52VtD/141/

问题是当我点击添加更多链接下拉列表时。不要移动光标。最后一项显示为已选中，仅在chrome中发生。

如果我们在控制台中看到。然后李的下拉菜单。我认为这就是为什么最后一个项目被显示为已选中。

如何解决此问题。

Answer 1

选择下拉列表中的最后一个元素是因为li不在下拉列表中。即使我们专注于添加更多，它也会被li的焦点所取代并被选中。

要解决此问题，我已删除了css中的box-shadow。它确实对我有用。

#dropdown-list{
 max-height: 200px;
 overflow: auto;
 top: 33px;
 position: relative;
 left: 50px;
 box-shadow: none;
 }

这是更新的小提琴：http://jsfiddle.net/52VtD/158/

Answer 2

问题是由你的max-height: 200px;引起的，如果你检查鼠标指针（在chrome下），你会看到你的最后一个li的焦点区域远远超出你的下拉列表（由z-index引起？）。在某些情况下，此区域将与您的“添加”链接重叠。

要根据您要显示的项目数量阻止设置max-height:。例如，对于7个项目，将max-height:设置为7 x 26（下拉列表中li的默认高度）+ 5（ul的默认填充）187px;

Answer 3

只需在列表项上设置position:relative似乎就可以解决问题：

<强> Updated fiddle