Css Issue Когда применяется прокрутка для раскрывающегося меню бутстрапа

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/

Проблема заключается в том, когда я нажимаю на добавить больше выпадающий список ссылок. Не перемещайте курсор. Последний элемент отображается как выбранный, и это происходит только в хроме.

Если мы видим в консоли. Тогда li из выпадающего меню. Я думаю, именно поэтому последний элемент отображается как выбранный.

Как исправить эту проблему.

Answer 1

Последний элемент в раскрывающемся списке выбран из-за того, что лики выпадающего списка. Даже если мы сосредоточимся на добавлении, он переопределяется фокусом ли и выбирается.

Чтобы устранить эту проблему, я удалил box-shadow в css. Это помогло мне.

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

Вот обновленный Fiddle: http://jsfiddle.net/52VtD/158/

Answer 2

Проблема связана с вашим max-height: 200px;, если вы проверите указатель мыши (под хром), вы увидите, что область фокуса вашего последнего li находится далеко за пределами выпадающего списка (вызванного z-индексом?). В некоторых случаях эта область будет перекрывать вашу ссылку «добавить».

Чтобы предотвратить установку max-height: в соответствии с количеством предметов, которые вы хотите показать. Например, для 7 элементов установлено max-height: - 7 x 26 (высота по умолчанию для липа в выпадающем списке) + 5 (по умолчанию для ul) 187px;

Answer 3

Просто установка position:relative по пунктам списка, кажется, решить проблему:

Updated fiddle