How to create a dropdown with lu and li tags like this

Question

This dropdown in the screenshot is created by ul and li tags. I just know how to create the dropdown box but I am not sure how to create this scroll bar. I feel I can do something like create a absolute position div as the scroll bar, and it's size and position should be calculated. These things should have no problem.

My real question is about the css. How to make the li tags can be display inside the ul tag. In this screenshot, we can see the ul can have a absolute position and a high value of z-index so that it can display on top of everything else. But how does the ul tag's border can cover the li tags.... I really don't know how to style it like this.... And also not sure what kind of code should I write to make it moving with the scroll bar. I don't need the calculation. Thank you so much.

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

Though if you want the list to appear when focused on the input box, I'd suggest using JS for that. In the example, you can't scroll by clicking on the scroll bar and moving it up and down, because the input box loses focus, and the list appears only when the focus is on the input box. But you can scroll with the mouse wheel.