Css问题当Scroll应用于引导下拉菜单

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的下拉菜单没有了。即使我们专注于添加更多，它正在被李的重点所取代并被选中。

要解决这个问题，我已经删除了在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

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

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

Answer 3

简单地设置在列表项position:relative似乎解决了问题：

Updated fiddle