CSS. Link doesn't works with input:focus

Question

There is fiddle with my problem.

As I can understand -- link doesn't work, because when I click on the link, link disappear because :focus isn't active anymore. But I can't come up with solution.

I think it's very common problem, but I didn't found any information about this.

Thanks for any help.

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

Just add a hover method to #results:

#results:hover{display:block;}

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

Answer 2

I would suggest in your case to include also :hover pseudo class and make the #results object visible on hover.

Like this :

#results:hover {
    display: block;
}

You can check working demo .