twitter-bootstrap 将滚动应用于引导下拉菜单时的 Css 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19271167/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css Issue When Scroll is applied for bootstrap drop down menu
提问by Cindrella
I have large list in my dropdown menu. so I have applied scroll to it. I want to show my dropdown menu always on top of link.
我的下拉菜单中有很大的列表。所以我对它应用了滚动。我想始终在链接顶部显示我的下拉菜单。
Below is my code:
下面是我的代码：
<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:
css：
#dropdown-list{
max-height: 200px;
overflow: auto;
top: 15px;
position: relative;
left: 50px
}
#add-more{
top: 224px;
position: relative;
}
}
Here is the fiddle for this: http://jsfiddle.net/52VtD/141/
这是为此的小提琴：http: //jsfiddle.net/52VtD/141/
Problem is when I click on add more link dropdown shows. Dont move the cursor. The last item is shown as selected and this happens only in chrome.
问题是当我点击添加更多链接下拉显示时。不要移动光标。最后一项显示为选中状态，这仅在 chrome 中发生。
If we see in console. Then li's are out of dropdown menu. I think thats why the last item is being shown as selected.
如果我们在控制台中看到。然后 li 就没有下拉菜单了。我认为这就是为什么最后一项被显示为选中的原因。
How to fix this issue.
如何解决这个问题。
采纳答案by Cindrella
The last element in dropdown is selected because li's are out of dropdown. Even if we focus on Add more it is being overridden by the focus of li's and getting selected.
选择下拉列表中的最后一个元素是因为 li 不在下拉列表中。即使我们专注于 Add more 它也会被 li 的焦点覆盖并被选中。
To fix this issue I have removed the box-shadowin css. It did trick for me.
为了解决这个问题，我删除了box-shadowin css。它对我有用。
#dropdown-list{
max-height: 200px;
overflow: auto;
top: 33px;
position: relative;
left: 50px;
box-shadow: none;
}
Here is the updated Fiddle: http://jsfiddle.net/52VtD/158/
这是更新的小提琴：http: //jsfiddle.net/52VtD/158/
回答by koala_dev
Simply setting position:relativeon the list items seems to solve the issue:
简单地position:relative在列表项上设置似乎可以解决问题：
回答by Bass Jobsen
The problem is caused by your max-height: 200px;if you check the mouse pointer (under chrome) you will see the focus area of your last li is far outside your dropdown (caused by the z-index?). In some cases this area will overlap your "add" link.
问题是由您max-height: 200px;检查鼠标指针（在 chrome 下）引起的，您会看到最后一个 li 的焦点区域远离下拉列表（由 z-index 引起？）。在某些情况下，此区域会与您的“添加”链接重叠。
To prevent set you max-height:according the number of items you want to show. For example for 7 items set max-height:to 7 x 26 (default height of a li in the dropdown) + 5 (default padding of the ul) 187px;
防止max-height:根据您要显示的项目数量设置您。例如，7 个项目设置max-height:为 7 x 26（下拉列表中 li 的默认高度）+ 5（ul 的默认填充）187px；
