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