CSS. 링크가 입력으로 작동하지 않습니다. focus

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를 확인할 수 있습니다.