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。