在我能够执行click事件之前，CSS div消失了

Question

我有以下CSS代码：

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

目的是当用户将焦点放在文本框上时，下拉列表变为可见 默认情况下，下拉列表应该是不可见的：

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

现在的问题是，当我尝试从下拉列表中选择一个项目（anchor href）时，下拉包装器在我实际能够执行click事件之前消失。发生这种情况是因为不再关注文本框了。

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

谢谢！

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

Edit2：小提琴基于@anpsmn制作的小提琴：http://jsfiddle.net/thh9z99c/2/ 我需要一个包含锚点的列表，因为它们代表一个带有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;
}

Answer 2

它适用于伪类而不是焦点：

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

小提琴：http://jsfiddle.net/thh9z99c/3/