CSS div 在我能够执行点击事件之前就消失了

Question

我有以下 CSS 代码:

#searchbar-wrapper input#header-searchbar:focus + 
    #search-dropdown-wrapper { display: block; } 

目的是当用户将焦点放在文本框上时，下拉菜单会变得可见。
下拉菜单默认情况下应该是不可见的:

#searchbar-wrapper #search-dropdown-wrapper{ display: none; } 

现在的问题是，当我尝试从下拉列表( anchor href)中选择一个元素时，下拉包装在我真正能够执行点击事件之前就消失了。发生这种情况是因为文本框上不再有焦点。

是否有无需更改整个代码的简单解决方案来解决我的问题？

谢谢!

编辑:我在图像中添加了结果 HTML，因为它是动态生成的。

Edit2:基于@anpsmn 制作的 fiddle 的 fiddle :http://jsfiddle.net/thh9z99c/2/我需要一个带有 anchor 的列表，因为它们代表一个带有 url 的列表。

Answer 1

使用CSS伪选择器[:focus]，然后将其扩展到子元素。

//CSS block

#searchbar-wrapper input#header-searchbar{

}
a{
  display: none;
}
#searchbar-wrapper input#header-searchbar:focus>a { // use [:focus>a] 
    display: flex;
    display: -webkit-flex;
}