如何使用这样的lu和li标签创建下拉列表

Question

屏幕截图中的下拉列表由ul和li标签创建。我只知道如何创建下拉框但我不知道如何创建此滚动条。 我觉得我可以做一些像创建一个绝对位置div作为滚动条，并且应该计算它的大小和位置。这些东西应该没有问题。

我真正的问题是关于CSS。如何使li标签可以显示在ul标签内。 在这个屏幕截图中，我们可以看到ul可以有一个绝对位置和一个高z-index值，这样它就可以显示在其他所有内容之上。但是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。在该示例中，您无法通过单击滚动条并上下移动来滚动，因为输入框失去焦点，并且仅当焦点位于输入框上时才会显示列表。但是你可以用鼠标滚轮滚动。