Как создать выпадающий список с тегами lu и li, подобный этому

Question

Это выпадающее меню на скриншоте создается тегами ul и li. Я просто знаю, как создать раскрывающийся список, но я не уверен, как создать эту полосу прокрутки. Я чувствую, что могу сделать что-то вроде создания абсолютной позиции div в качестве полосы прокрутки, и ее размер и положение должны быть рассчитаны. У этих вещей не должно быть проблем.

Мой настоящий вопрос о css. Как заставить теги li отображать внутри тега ul. На этом скриншоте мы видим, что ul может иметь абсолютное положение и высокое значение z-индекса, чтобы оно отображалось поверх всего остального. Но как граница тега ul может охватывать теги li .... Я действительно не знаю, как это сделать так ... И также не знаю, какой код я должен писать, чтобы заставить его перемещаться с помощью прокрутки бар. Мне не нужны расчеты. Огромное спасибо.

Answer 1

HTML

<input type="text" /> 
<ul> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
</ul> 

CSS

input { 
    width: 200px; 
} 
input:focus ~ ul { 
    display: block; 
} 
ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 200px; 
    border: 1px solid silver; 
    height: 150px; /*required for scrolling */ 
    overflow: auto; /*required for scrolling */ 
    display: none; 
} 
ul li:hover { 
    background: gainsboro; 
} 

FIDDLE

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