我想实现只使用CSS / HTML下拉建议的搜索框。 它显示了罚款，但我不能让onclick事件的下拉列表元素上单击时触发和链接不工作的。 如果我不躲列表，然后它工作正常，但隐藏，然后使用时显示“：焦点”的输入框的选择不应对点击了。
任何想法如何解决这一问题？ 这是隐藏要素一种正常的行为？
正是基于这个例子中 ，它似乎并没有任何工作在那里。
一个简单的例子再现该问题：
HTML：
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<input class="inputfield" type="text" placeholder="SEARCH...">
<ul class="search-results">
<li class="typeahead" onclick="console.log('test')">
<a class="center" href="/test" >test</a>
</li>
<li class="typeahead" onclick="console.log('test')">
<a class="center" href="/test" >test</a>
</li>
<li class="typeahead" onclick="console.log('test')">
<a class="center" href="/test" >test</a>
</li>
<li class="typeahead" onclick="console.log('test')">
<a class="center" href="/test" >test</a>
</li>
</ul>
</html>
CSS：
input{
width: 300px;
height: 26px;
padding-left: 10px;
border: 1px solid lightgrey;
outline: none;
}
ul{
list-style-type: none;
padding: 0;
margin: 0;
visibility: hidden;
}
input:focus + ul{
visibility: visible;
}
li{
border: 1px solid lightgrey;
border-top-style: none;
width: 300px;
height: 25px;
padding-left: 10px;
background: #fff;
cursor: pointer;
}
li:hover{
background-color: lightgrey;
}
li:hover a{
color: white;
}
a{
color: black;
font-size: 12px;
display: block;
text-decoration: none;
}
