当滚动应用于引导下拉菜单时出现Css问题

我的下拉菜单中有一个很大的列表。因此，我已将滚动应用于它。我想显示我的下拉菜单总是在链接的顶部

下面是我的代码：

<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>

}

这是一把小提琴：

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

如果我们在控制台中看到。然后李的就从下拉菜单中消失了。我想这就是为什么最后一项显示为选中的原因

---

如何解决此问题。

此问题是由您的

最大高度：200px如果你检查鼠标指针（在chrome下），你会看到最后一个li的焦点区域远远超出你的下拉列表（由z索引引起？）。在某些情况下，此区域将与“添加”链接重叠

要防止出现这种情况，请根据要显示的项目数设置
最大高度：
。例如，对于7项设置
最大高度：
为7 x 26（下拉列表中li的默认高度）+5（ul的默认填充）187px
 问题是由于您的
最大高度：200px如果你检查鼠标指针（在chrome下），你会看到最后一个li的焦点区域远远超出你的下拉列表（由z索引引起？）。在某些情况下，此区域将与“添加”链接重叠

要防止出现这种情况，请根据要显示的项目数设置
最大高度：
。例如，对于7项设置
最大高度：
为7 x 26（下拉列表中li的默认高度）+5（ul的默认填充）187px
 选择下拉列表中的最后一个元素，因为li的元素不在下拉列表中。即使我们专注于增加更多，它也被李的关注和被选中所覆盖

为了解决这个问题，我删除了css中的
框阴影。这对我很有帮助

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

这是更新后的提琴：
下拉列表中的最后一个元素被选中，因为李的元素不在下拉列表中。即使我们专注于增加更多，它也被李的关注和被选中所覆盖

为了解决这个问题，我删除了css中的
框阴影。这对我很有帮助

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

以下是更新的Fiddle:
只需在列表项上设置
位置：relative
，似乎就能解决问题：

只需在列表项上设置
位置：relative
，似乎就能解决以下问题：

这似乎有点微不足道……如果用户必须移动鼠标来选择某个内容，那么这又有什么关系呢？我不能在30.0.1599.66上复制这个m@DavidNguyen阮：我只使用30.0.1599.66米版本。我在这个版本中测试了小提琴，它被复制了。这看起来有点琐碎…如果用户必须移动鼠标来选择某个东西，那又有什么关系呢？我不能在30.0.1599.66上复制这个m@DavidNguyen阮：我只使用30.0.1599.66米版本。我在这个版本中测试了小提琴，它被复制了。李在下拉列表之外，它与“添加更多”链接重叠。为了解决这个问题，我删除了下拉菜单框的阴影，它做到了。我已经更新了我的答案。李在下拉列表之外，它与“添加更多”链接重叠。为了解决这个问题，我删除了下拉菜单框的阴影，它做到了。我已经更新了我的答案。使用位置：相对固定在小提琴上。但不在我的应用程序中：-）。解决问题的各种方法。使用位置：相对固定在小提琴上。但不在我的应用程序中：-）。解决问题的各种方法。希望它能帮助别人。