Menukar daripada show hidden kepada show block apabila fokus tidak berfungsi

Question

Saya cuba membuat "searchbardropdown" saya dipaparkan apabila "searchbarinput" diklik, tetapi itu tidak berfungsi. Adakah sesiapa tahu apa yang berlaku? Terima kasih! Dalam gambar, anda dapat melihat bahawa warna latar belakang berubah apabila input mendapat fokus, tetapi lungsur turun tidak muncul.

.searchbardropdown{
  display: none;
}
.searchbarinput:focus .searchbardropdown{
  display: block;
}
.searchbarinput:focus{
  background-color: red;
}

<div class="searchbarcontainer">
    <script src="searchbar.js"></script>
    <div class="searchbar">
    </div><input class="searchbarinput" id="searchbarinput" type="text" placeholder="Pesquisar.."><button class="serchbarbutton" type="submit"><i class="material-symbols-outlined searchbarbuttonicon">search</i></button>
    <div class="searchbardropdown">
        <a class="dropdowna" href="#">// Trocar Variaveis<br></a>
        <a class="dropdowna" href="#trocarvariaveis">// Celsius para Farenheit<br></a>
        <a class="dropdowna" href="#celsiusparafarenheit">// Farenheit para Celsius<br></a>
        <a class="dropdowna" href="#farenheitparacelsius">// Area Circulo<br></a>
        <a class="dropdowna" href="#areacirculo">// Par ou Impar<br></a>
        <a class="dropdowna" href="#parouimpar">// Intervalo entre numeros<br></a>
        <a class="dropdowna" href="#intervalo">// Intervalo entre maior e menor de vetor<br></a>
        <a class="dropdowna" href="#intervalovetor">// Maior e menor numero<br></a>
        <a class="dropdowna" href="#maiormenor">// Paisagem ou retrato<br></a>  
        <a class="dropdowna" href="#paisagemouretrato">// Fizz ou Buzz<br></a>
        <a class="dropdowna" href="#fizzbuzz">// String do objeto<br></a>
        <a class="dropdowna" href="#stringobject">// Par ou impar ate limite<br></a>
    </div>
</div>

Answer 1

Anda harus menggunakan pemilih senget (~) untuk memilih adik beradik.

  .searchbardropdown{
    display: none;
  }
  .searchbarinput:focus ~ .searchbardropdown{
    display: block;
  }
  .searchbarinput:focus{
    background-color: red;
  }

 

            sssccc
            

            
search
            

                // Trocar Variaveis

                // Celsius para Farenheit

                // Farenheit para Celsius

                // Area Circulo

                // Par ou Impar

                // Intervalo entre numeros

                // Intervalo entre maior e menor de vetor

                // Maior e menor numero

                // Paisagem ou retrato
  
                // Fizz ou Buzz

                // String do objeto

                // Par ou impar ate limite