javascript - 如何使用这样的 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。例子中点击滚动条上下移动是不能滚动的，因为输入框失去焦点，只有焦点在输入框上才会出现列表。但您可以使用鼠标滚轮滚动。