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

我有以下CSS代码：

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

这样做的目的是当用户将焦点放在文本框上时，下拉列表变得可见。 默认情况下，下拉列表应不可见，但：

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

现在的问题是，当我尝试从下拉列表anchor href中选择一个项目时，在我真正能够执行click事件之前，下拉包装器就会消失。这是因为不再关注文本框

我的问题有没有一个简单的解决方案，而不需要更改整个代码

谢谢

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

编辑2：基于@anpsmn制作的小提琴的小提琴：

---

我需要一个带有锚的列表，因为它们代表一个带有URL的列表

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

//CSS块

#searchbar-wrapper input#header-searchbar{

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

---

它与活动的伪类一起工作，而不是与焦点一起工作：

#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; } 

---

Fiddle:

你能发布相关的html代码吗？因为当你选择一个项目时，焦点不再放在文本框上。我知道，只是在寻找一个快速简单的解决方案。你有什么建议吗？这个怎么样？搜索栏包装器inputheader搜索栏：focus+搜索下拉包装器，搜索栏包装器inputheader搜索栏+搜索下拉包装器：focus{display:block；}嗯，不幸的是，它不起作用……谢谢你的回答。我没有对此进行测试，但我发现它与伪元素active而不是focus一起工作。如果你能创建一个小提琴来表明它的工作，我会接受它。是的，没问题，我不知道你的css的其余部分是什么样子，所以我很难给你你想要的确切答案，除非你想把它放在小提琴上。我在我自己网站的标题上用这种方式工作，你可以在这里找到css