CSS。链接不适用于输入：焦点

Question

我的问题有fiddle。

据我所知 - 链接不起作用，因为当我点击链接时，链接消失，因为：焦点不再有效。但我无法提出解决方案。

我认为这是非常常见的问题，但我没有找到任何有关此问题的信息。

感谢您的帮助。

CSS ：

#search:focus + #results {
    display: block;
}

#results {
    display: none;
}

HTML ：

<input id="search" type="text"/>

<ul id="results">
    <li><a href="/1"> First </a></li>
    <li><a href="/2"> Second </a></li>
    <li><a href="/3"> Third </a></li>
</ul>

Answer 1

只需将悬停方法添加到#results：

#results:hover{display:block;}

http://jsfiddle.net/gc6L323f/3/

Answer 2

我建议在你的情况下也包括:hover伪类，并在悬停时使#results对象可见。

像这样：

#results:hover {
    display: block;
}

您可以查看working demo。