下拉菜单的 CSS（样式组件）问题

Question

我正在开发一个下拉菜单，在其中单击或聚焦输入，一个白色容器应该显示在输入的底部，问题是，焦点不起作用，我不知道为什么（我讨厌css :/)

这就是代码

这是结构

<NavbartPart1SearchBar>
        <input type="text" placeholder="Buscar en Facebook" maxLength={100} />
        {/* Dropdown */}
        <NavbarPart1Dropdown> </NavbarPart1Dropdown>
      </NavbartPart1SearchBar>

export const NavbarPart1Dropdown = styles.div`
    display: none;
    position: absolute;

    width: 100%;
    height: 20vh;
    background: white;

    
`;

export const NavbartPart1SearchBar = styles.div`

position: relative;

input{
    width: 255px;
    font-size: 1.53rem;
    font-weight: 300;

    padding: 1.23rem 1.75rem;
    border-radius: 2.1rem;

    background: #F0F2F5;

    &:focus ${NavbarPart1Dropdown} {
      display: flex;
    }

}


`;

如您所见，输入有一个焦点事件，当我关注它时，我将 display flex 添加到另一个容器，但它不起作用，您发现我的代码有什么问题吗？

让我告诉你它应该是什么样子

你看到黑色的部分了吗？我希望它在专注时出现，所以，如果你能帮助我，你很酷！

Answer 1

您可以在 CSS 中使用+ 选择下一个兄弟元素。所以以下应该工作：

input:focus + ${NavbarPart1Dropdown} { display: block; }