css - 将滚动应用于引导下拉菜单时的Css问题

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 中发生。

如果我们在控制台中看到。然后 li 不在下拉菜单中。我认为这就是为什么最后一项显示为选中的原因。

如何解决这个问题。

Answer 1

下拉列表中的最后一个元素被选中，因为 li 不在下拉列表中。即使我们专注于 Add more，它也会被 li 的焦点覆盖并被选中。

为了解决这个问题，我删除了box-shadowin css。它对我有用。

#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列表项似乎可以解决问题：

更新的小提琴